react-hook-usefetch
v1.0.4
Published
useFetch React custom hook
Downloads
22
Maintainers
Readme
useFetch - React custom hook
Hook to fetch data with fetchAPI.
Also can handle errors and loading state.
Why useFetch?
With this hook, you can get a json data from an url and handle the following variables:
- Fetched data.
- Loading boolean.
- Error data.
When that vars are updated, your component is re-rendedred.
Usage
Just install:
npm install react-hook-usefetch
And import the hook.
import useFetch from 'react-hook-usefetch';
Use it in your component:
const YourComponent = props => {
...
const data = useFetch('url', options);
...
}
Optional, you can send personal settings as second parameter:
const headers = new Headers();
const options = {
method: 'GET',
headers,
mode: 'cors',
cache: 'default',
...more
};
Full Example
import React from 'react';
import useFetch from 'react-hook-usefetch';
export default () => {
const { data, loading, error } = useFetch('https://pokeapi.co/api/v2/pokemon', {});
const getData = () => {
if (error.status) return <li><p>Error: {error.message}</p></li>;
if (loading) return <li><p>Loading...</p></li>;
if (data.results) return data.results.map((poke, i) => <li key={`poke-${i}`}><p>{poke.name}</p></li>);
}
return (
<div>
<h1>Test</h1>
<ul>
{getData()}
</ul>
</div>
);
}