README
useAxios
React hook for axios, written in typescript
Features
- same api as
useEffect
- request cancelling on component unmount
- typings!
Install
npm
npm install --save react-use-axios
yarn
yarn add react-use-axios
Note: react(>= v16.8.0)
and axios(>= 0.19.0)
are listed as peer dependencies.
Prior Works
Why creating another one? Because:
- I want typings
- I want to make its behaviour and api the same as
useEffect
, so we don't need to look up the api when using this hook
Usage
use this hook just like useEffect
, the first argument is axios' config object,
and the second argument is useEffect's dependencies array.
interface Props {
foo: string
}
interface ResponseObject {
bar: string
}
const Component: React.FunctionComponent<Props> = (props) => {
const { foo } = props
const [res] = useAxios<ResponseObject[]>(
{
url: '/api',
method: 'get',
},
[foo]
)
if (res.type === 'loading') return 'loading'
if (res.type === 'error') return 'error'
if (res.data.length === 0) return 'empty'
return objects
}
Skipping request
Often you want to skip the request on some condition, you can simply pass skipRequest
to useAxios
useAxios({
url: '/api',
method: 'get',
skipRequest: () => !foo
}, [foo])
Callbacks
useEffect to the rescure:
const [res] = useAxios({ url: '/api', method: 'get' }, [])
useEffect(() => {
if (res.type === 'success') {
console.info(res.data)
}
if (res.type === 'error') {
console.error(res.data)
}
}, [res])
Rerun
rerun
will retrigger the request even if you have skipped request, useful for callback triggered requests
const [res, {rerun}] = useAxios({ url: '/api', method: 'get', skipRequest: () => true }, [])
const onClick = () => {
rerun()
}
<button onClick={onClick} />
Cancelling request on component unmount
useAxios uses the axios cancel token to cancel requests, so requests are automatically canceled when a component unmounts.
Note on source code
What's with the areHookInputsEqual
?
This dependencies comparison is copied from the React codebase. It's needed because without it, when your dependencies change, you will get an extra render with the previous data. So to avoid this, we need to reset the state in the same event look / scheduler.
License
MIT