Simple Axios hook for React. Use React Suspense to show loading indicator and Error Boundary to handle request errors.
npm install use-axiosSimple Axios hook for React. Use React Suspense to show loading indicator and Error Boundary to handle request errors.
> ℹ This is a React hook for data fetching inside a function component body. Use regular axios for requests in onSubmit, onClick etc.
``sh`
npm install axios use-axios
#### Params
Same as axios.
#### Returns
Success response from axios.
#### Throws
Response error from axios or promise for React Suspense.
`js
import { Suspense } from 'react';
import useAxios from 'use-axios';
function User({ id }) {
const { data } = useAxios(/api/users/${id});
return
function App() {
return (
);
}
`
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}
>
);
}
return First name: {data.first_name};
}
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.
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 (
function User({ id, first_name }) {
return (
);
refetch('/api/users');
}}
>
❌
function App() {
return (
);
}
`
You can use a custom axios instance by calling create.
#### 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',
});
`
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