react-use-state-async
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.3 • Public • Published

    react-use-state-async

    A custom hook trigger call async function each dependencies changes. Support holding and updating for fetch data.

    Demo

    Install

    With npm

    npm install --save react-use-state-async

    With yarn

    yarn add react-use-state-async

    Usage

    import * as React from "react";
    import useStateAsync from "react-use-state-async";
     
    const getSomethingApi = (id) => {
      return new Promise((res, rej) => {
        setTimeout(() => {
          if (id % 2 === 0) res({ id, fakeData: true });
          rej("cannot get data");
        }, 2000);
      });
    };
     
    export default function App() {
      const [id, setId] = React.useState(0);
      const { isLoading, setData, fetch, data, error } = useStateAsync(async () => {
        // do async action
        try {
          const res = await getSomethingApi(id);
          return res;
        } catch (e) {
          throw e;
        }
      }, [id]);
     
      return (
        <div>
          <button onClick={() => setId((previousId) => previousId + 1)}>
            Fetch data with increase Id
          </button>
          <button onClick={() => fetch()}>Refetch api</button>
          <button onClick={() => setData({ ...data, update: true })}>
            Update data
          </button>
          {isLoading ? <p>Loading</p> : <p>Loaded</p>}
          {data && <p>{JSON.stringify(data)}</p>}
          {error && <p>{JSON.stringify(error)}</p>}
        </div>
      );
    }

    Props

    useStateAsync(
      callback: () => any | async () => Promise<any>,
      dependencies: Array<any>
    )
    

    Exposed

    parameter type description
    isLoading boolean `true` if the callback function is running
    data any the data is returned in callback function
    error any the error is thrown in callback function
    setData function update `data` state
    fetch function trigger call callback function

    License

    MIT ©

    Install

    npm i react-use-state-async

    DownloadsWeekly Downloads

    5

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    26.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • vutoan266