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 :)