react-hook-async

React hooks for async actions

Usage no npm install needed!

<script type="module">
  import reactHookAsync from 'https://cdn.skypack.dev/react-hook-async';
</script>

README

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