react-hook-usefetch

    1.0.4 • Public • Published

    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>
      );
     
    }

    Install

    npm i react-hook-usefetch

    DownloadsWeekly Downloads

    16

    Version

    1.0.4

    License

    ISC

    Unpacked Size

    2.9 kB

    Total Files

    3

    Last publish

    Collaborators

    • franlol