react-fetch-hook
    TypeScript icon, indicating that this package has built-in type declarations

    1.8.5 • Public • Published

    react-fetch-hook

    CircleCI npm version npm downloads

    React hook for conveniently use Fetch API.

    • Tiny (556 B). Calculated by size-limit
    • Both Flow and TypeScript types included
    import React from "react";
    import useFetch from "react-fetch-hook";
    
    const Component = () => {
      const { isLoading, data } = useFetch("https://swapi.co/api/people/1");
    
      return isLoading ? (
        <div>Loading...</div>
      ) : (
        <UserProfile {...data} />
      );
    };

    useFetch accepts the same arguments as fetch function.

    Installation

    Install it with yarn:

    yarn add react-fetch-hook
    

    Or with npm:

    npm i react-fetch-hook --save
    

    Usage

    Custom formatter

    Default is response => response.json() formatter. You can pass custom formatter:

    const { isLoading, data } = useFetch("https://swapi.co/api/people/1", {
        formatter: (response) => response.text()
    });

    Error handling

    The useFetch hook returns an error field at any fetch exception. The error field extends Error and has status and statusText fields equal to Response.

    ...
    
    const Component = () => {
      const { isLoading, data, error } = useFetch("https://swapi.co/api/people/1");
    
      if (error) {
        return <div>
          <p>Code: ${error.status}</p>
          <p>Message: ${error.statusText}</p>
        </div>
      }
     
      ...
    };

    Multiple requests

    Multiple useFetch in the same file/component supported:

    const result1 = useFetch("https://swapi.co/api/people/1");
    const result2 = useFetch("https://swapi.co/api/people/2");
    
    if (result1.isLoading && result2.isLoading) {
      return <div>Loading...</div>;
    }  
    
    return <div>
        <UserProfile {...result1.data} />
        <UserProfile {...result2.data} />
    </div>

    Depends

    The request will not be called until all elements of depends array be truthy. Example:

    const {authToken} = useContext(authTokenContext);
    const [someState, setSomeState] = useState(false);
    const { isLoading, data } = useFetch("https://swapi.co/api/people/1", {
        depends: [!!authToken, someState] // don't call request, if haven't authToken OR someState: false
    });

    See example.

    Re-call requests

    If any element of depends changed, request will be re-call. For example, you can use react-use-trigger for re-call the request:

    import createTrigger from "react-use-trigger";
    import useTrigger from "react-use-trigger/useTrigger";
    
    const requestTrigger = createTrigger();
    
    export const Subscriber = () => {  
        const requestTriggerValue = useTrigger(requestTrigger);
        
        const { isLoading, data } = useFetch("https://swapi.co/api/people/1", {
            depends: [requestTriggerValue]
        });
      
        return <div />;
    }
    
    export const Sender = () => { 
        return <button onClick={() => {
            requestTrigger() // re-call request
        }}>Send</button>
    }

    usePromise

    For custom promised function.

    import React from "react";
    import usePromise from "react-fetch-hook/usePromise";
    import callPromise from "..."
    
    const Component = () => {
      const { isLoading, data } = usePromise(() => callPromise(...params), [...params]);
    
      return isLoading ? (
        <div>Loading...</div>
      ) : (
        <UserProfile {...data} />
      );
    };

    Examples

    • Basic - Just fetch data with useFetch.
    • Depends - Usage depends option for refresh query.
    • Pagination - Usage usePaginationRequest for infinite scroll implementation.

    API

    useFetch

    Create a hook wrapper for fetch call.

    useFetch(
        path: RequestInfo,
        options?: {
            ...RequestOptions,
            formatter?: Response => Promise
            depends?: Array<boolean>
        },
        specialOptions?: {
            formatter?: Response => Promise
            depends?: Array<boolean>
        }
    ): TUseFetchResult

    where TUseFetchResult is:

    {
        data: any,
        isLoading: boolean,
        error: any
    }

    RequestInfo, RequestOptions is fetch args.

    usePromise

    usePromise<T, I: $ReadOnlyArray<mixed>>(
        callFunction: ?(...args: I) => Promise<T>,
        ...inputs: I
    ): TUsePromiseResult<T>

    where TUsePromiseResult<T> is

    type TUsePromiseResult<T> = {
        data: ?T,
        isLoading: boolean,
        error: mixed
    }

    Experimental: usePaginatedRequest

    ⚠️ Warning: this method is experimental, API can be changed.

    Create a paginated request.

    usePaginatedRequest = <T>(
        request: (params: { limit: number, offset: number }) => Promise<Array<T>>,
        limit: number,
        ...depends: Array<any>
    ): {
        data: Array<T>,
        loadMore?: () => mixed,
        hasMore: boolean
    };

    Who Uses react-fetch-hook

    Open Source projects

    Companies

    See more

    Sponsored

    Sponsored by Lessmess

    Install

    npm i react-fetch-hook

    DownloadsWeekly Downloads

    4,994

    Version

    1.8.5

    License

    MIT

    Unpacked Size

    16.8 kB

    Total Files

    13

    Last publish

    Collaborators

    • ilyalesik