use-axios-client
Basics
Getting Started

useAxios

The useAxios hook can be used to make an axios request when your component renders. It provides a clean, simple API to allow you to configure and handle your request flow.

# Example

import { useAxios } from 'use-axios-client';
export default () => {
const { data, error, loading } = useAxios({
url: 'https://example/api',
});
return (
<>
{loading && <div>Loading...</div>}
{error && <div>{error.message}</div>}
{data && <div>{data}</div>}
</>
);
};

# Request

You can refer to the Request Config section of the axios documentation to see an exhaustive list of all request options.

If needed, these additional options can be passed to the hook to configure your request.

PropertyTypeDescription
axiosInstanceAxiosInstanceAn optional axios instance to be used when making the request.
ssrDataanyData optionally passed in from server-side rendering.

# Response

These response values are returned by the useAxios hook and can be used to handle each state of your request.

It also provides several functions that allow you to interact with the request in an imperative way if needed.

PropertyTypeDescription
dataanyThe data response provided by the server.
errorError | nullAn error message when a response is non-2xx.
loadingbooleanThe loading state of the request.
cancelFunctionA function that can be called to cancel an inflight request.
refetchFunctionA function that can be called to trigger a new request.