react-hook-async's Introduction

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

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}`
`execute`	`Function`	Function to perform an async task
`reset`	`Function`	Function to reset `apiData`