use-axios

Simple Axios hook for React. Use React Suspense to show loading indicator and Error Boundary to handle request errors.

TodoMVC example

> ℹ This is a React hook for data fetching inside a function component body. Use regular axios for requests in onSubmit, onClick etc.

Install

``sh
npm install axios use-axios
`

useAxios(url[, config])

#### Params

Same as axios.

#### Returns

Success response from axios.

#### Throws

Response error from axios or promise for React Suspense.

Example

`js
import { Suspense } from 'react';
import useAxios from 'use-axios';

function User({ id }) {
const { data } = useAxios(/api/users/${id});

return

function App() {
return (



);
}
`

Handle errors

Create an error boundary, for example using react-error-boundary.

`js
import { Suspense } from 'react';
import ErrorBoundary from 'react-error-boundary';

function MyFallbackComponent({ error, componentStack }) {
return (
<>



Oops! A request error occurred!


        status: {error.response.status}
        {'\n'}
        statusText: {error.response.statusText}
        {'\n'}
        Stacktrace:
        {componentStack}
      

function App() {
return (





);
}
`

To handle error inside a component, use useAxiosSafe:

`js
import { useAxiosSafe } from 'use-axios';

function User({ id }) {
const [error, { data }] = useAxiosSafe(/api/users/${id});
if (error) {
return (
<>



Oops! A request error occurred!


          status: {error.response.status}
          {'\n'}
          statusText: {error.response.statusText}
        

Successful responses with the same (stable JSON stringified) arguments are cached across the application. Components may rerender and call useAxios multiple times, and only one HTTP request is made, as long as there is some component mounted using the same arguments.

$3

Refetch data and update components. Calling this does nothing, if there are no components currently mounted using useAxios and same (stable JSON stringified) arguments.

#### Params

Same as axios.

#### Refetch example

Remove user and update list of users:

`js
import { Suspense } from 'react';
import { useAxios, refetch } from 'use-axios';
import { delete as del } from 'axios';

function Users() {
const { data } = useAxios('/api/users');
return (



{data.map((user) => (

))}


function App() {
return (



);
}
`

Using a custom axios instance

You can use a custom axios instance by calling create.

$3

#### Params

An axios instance or an optional config object for axios.create.

#### Returns

An object with properties useAxios, useAxiosSafe and refetch.

#### Custom axios instance example

`js
import { create } from 'use-axios';

const { useAxios } = create({
baseURL: 'https://api.example.com',
});
`

Not ready for Suspense?

Import from use-axios/loading-state to use the { isLoading, data, error } style API. Example:

`js
import { useAxiosSafe } from 'use-axios/loading-state';

function User({ id }) {
const { isLoading, data, error } = useAxiosSafe(/api/users/${id});

if (isLoading) {
return 'Loading...';
}

return