Next Perpendicular Moonlanding

    @grd/use-promise

    1.0.0 • Public • Published

    @grd/usePromise()

    Simple react hook to handle promises

    Note: It works with any Promise implementation, but this documentation uses axios for demonstration.

    Dependency: react@>16.8.0

    Get started:

    Install

    yarn add @grd/use-promise;

    Import

    import usePromise from '@grd/use-promise';

    Use

    const [invokeFn, {result, error, isLoading}] = usePromise((arg) => Promise(arg))

    Example A - invoked on demand:

    import { usePromise } from '@grd/use-promise';
    
    
    export const ExampleA = () => {
      
      const [getUser, {result, error, isLoading}] = usePromise(userId => axios.get(`/users/${userId}`));
      
      return (
        <>
          <button onClick={() => getUser(1)}>Retrieve User</button>
          {result && <p>Hello {result.data?.user?.name}</p>}
          {error && <p>Whoops: {error.message}!</p>}
          {isLoading && <p>loading...</p>}
        </>
      );
    };

    Example B - invoked on load:

    import { usePromise } from '@grd/use-promise';
    import { useEffect } from 'react';
    
    
    export const ExampleB = () => {
      
      const [getUser, {result, error, isLoading}] = usePromise(userId => axios.get(`/users/${userId}`));
    
      useEffect(() => {
        getUser(1);
      }, [getUser]);
      
      return (
        <>
          {result && <p>Hello {result.data?.user?.name}</p>}
          {error && <p>Whoops: {error.message}!</p>}
          {isLoading && <p>loading...</p>}
        </>
      );
    };

    Install

    npm i @grd/use-promise

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    5.93 kB

    Total Files

    4

    Last publish

    Collaborators

    • grd