Notorious Party Muppets

    react-hook-async

    2.1.2 • Public • Published

    React-hook-async

    • Simple way to work with async in your react components, using new React hooks.
    • Support chaining async tasks.
    • Small with no dependency needed

    INSTALLATION

    yarn add react-hook-async

    or

    npm i react-hook-async --save

    Usage

    Performing an async task is common actions when working with React.

    With hooks, we usually use something like const [loading, setLoading] = useState(false) to manipulate our UI: show a loading indicator, an error message, ... This thing is trying to make your life a little bit easier when working with async data.

    import React, {useState} from 'react';
    import axios from 'axios'
    import { useAsync } from 'react-hook-async';
     
    const Example = (props) => {
     
      const [text, setText] = useState("");
     
      const [apiData, fetchApi] = useAsync([], query => axios.get("<your_api_endpoint_here>", {
        params: {
          q: query
        }
      }))
     
      const onSearch = () => {
        fetchApi(text);
      };
     
      const {loading, result, error, lastFetch} = apiData;
     
      return (
        <div>
          <input type="text" value={text} onChange={e => setText(e.target.value)}/>
          {
            loading
            ? <div>Loading ...</div>
            : error
              ? <div>{error.message}</div>
              : <div>{result}</div>
          }
        </div>
      )
    }
     
    export default Example;

    API

    • useAsync(initValue, func) : [apiData, execute, reset]

    Params:

    Name Type Description
    func () => Promise A function return promise. The value from promise will be set to apiData.result
    initValue any Initial value for apiData.result

    Returned Value:

    Name Type Description
    apiData {loading: boolean, error: null|Error, result: any, lastFetch: Date} Async task state
    execute Function Function to perform an async task
    reset Function Function to reset apiData

    FAQ

    Any pull requests & issues are warmly welcome :)

    Install

    npm i react-hook-async

    DownloadsWeekly Downloads

    18

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    5.8 kB

    Total Files

    4

    Last publish

    Collaborators

    • quan.nh.25595