What’s axios-hooks?
You might need to make requests to your own or external API in your React app and you usually needed to use Promises to get the results back, trying to use them inside your React components with the axios library.
Axios-hooks is here to solve this problem with a simpler syntax using the complete power of React Hooks in a few lines of code.
Features
All the axios awesomeness you are familiar with but simplified with Hooks.
- Zero configuration, but configurable in case it’s needed.
- One-line usage.
- Super straightforward to use with server-side rendering.
Installation
To install it with npm:
npm install axios axios-hooks
To install it with Yarn:
yarn add axios axios-hooks
Axios is a peer dependency and needs to be installed explicitly.
How Do I Use It?
It will feel easy, like using useQuery
from Apollo React with GraphQL queries.
useAxios
This hook will return three simple elements:
data
: An object containing the response from the server.loading
: Boolean if the request is pending.error
: If the response contained an error code with related messages.
You will access the useAxios
Hook to do almost every operation and, in some cases, also the configure
Hook to define an API-base endpoint URL.
import React from "react"
import ReactDOM from "react-dom"
import useAxios from "axios-hooks"
function App() {
const [{ data: getData, loading: getLoading, error: getError }] = useAxios(
"https://api.myjson.com/bins/820fc"
)
const [
{ data: putData, loading: putLoading, error: putError },
executePut,
] = useAxios(
{
url: "https://api.myjson.com/bins/820fc",
method: "PUT",
},
{ manual: true }
)
function updateData() {
executePut({
data: {
...getData,
updatedAt: new Date().toISOString(),
},
})
}
if (getLoading || putLoading)
return (
<div>
<button>...</button>
<pre>NOW: ...</pre>
<pre>INITIAL: ...</pre>
</div>
)
if (getError || putError) return <p>Error!</p>
function getLatestTime() {
if (putData && putData.updatedAt) return putData.updatedAt
else return getData.updatedAt
}
const currentTime = getLatestTime()
return (
<div>
<button onClick={updateData}>Update remote Time</button>
<pre>NOW: {new Date(currentTime).toISOString().split("T")[1]}</pre>
<pre>
INITIAL: {new Date(getData.updatedAt).toISOString().split("T")[1]}
</pre>
</div>
)
}
const rootElement = document.getElementById("root")
ReactDOM.render(<App />, rootElement)