> For the complete documentation index, see [llms.txt](https://react-use-api.gitbook.io/react-use-api/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://react-use-api.gitbook.io/react-use-api/usage/getting-started.md).

# Getting Started

### Installation

❗**Axios** *is a peer dependency (prerequisite) and it has to be installed* 

**NPM**

```bash
$ npm i react-use-api axios
```

**Yarn**

```bash
$ yarn add react-use-api axios
```

### Usage

#### With ApiProvider

```jsx
import React from 'react'
import ReactDom from 'react-dom'
import useApi, { ApiProvider } from 'react-use-api'

import App from './App'

// there is only one props "context", which is must given for SSR,
// client side can omit it
ReactDom.render(
  <ApiProvider>
    <App />
  </ApiProvider>,
  document.getElementById('root')
)
```

#### Basic Usage

```jsx
import React from 'react'
import useApi from 'react-use-api'

export const Main = () => {
  const [data, { loading, error }, request] = useApi({
    url: '/api/foo/bar'
  })

  return (
    <>
      {loading && <div>Loading...</div>}
      {error && <div>{error.response.data.errMsg}</div>}
      {data && (
        <>
          <div>Hello! {data.username}</div>
          <button onClick={request}>Reload</button>
        </>
      )}
    </>
  )
}
```

### Parameters

#### **Types**

```typescript
const [data, state, request] = useApi(
  config: ReactUseApi.Config | string,
  opt?: ReactUseApi.Options | ReactUseApi.Options['handleData']
)
```

#### **Code**

```jsx
const [data, state, request] = useApi(config, options)

// request the API data again
request(config?: ReactUseApi.Config, keepState = true)
```

#### Config

The config can be an [Axios Request Config](https://github.com/axios/axios#request-config) or a URL string.

```jsx
const [data, state] = useApi('/api/foo/bar')
// equals to
const [data, state] = useApi({
  url: '/api/foo/bar'
})
```