1.0.4 • Published 4 years ago

react-hook-usefetch v1.0.4

Weekly downloads
Last release
4 years ago

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.


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',
    mode: 'cors',
    cache: 'default',

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 (