hanford/use-loadable

React hook for knowing when an async function is loading or had an error

use-loadable

React hook for Loadable

Note: This is using the new React Hooks API Proposal which is subject to change until React 16.7 final.

You'll need to install react, react-dom, etc at ^16.7.0-alpha.0

Install

yarn add use-loadable

Usage

import useLoadable from 'use-loadable' 

const sleep = time => () => new Promise(done => setTimeout(done, time));

function App() {
  const [{ loading, error, res }, onClick] = useLoadable(sleep(500));

  return (
    <React.Fragment>
      <pre>
        res: {JSON.stringify(res)}
        <br />
        error: {JSON.stringify(error)}
        <br />
        loading: {JSON.stringify(loading)}
      </pre>
      <button onClick={onClick}>{loading ? "Loading..." : "Load"}</button>
    </React.Fragment>
  );
}

Using delayMs

Sometimes async functions will be cached and the function will return too quickly resulting in a flicker. To mitigate that, you can pass an optional { delayMs } argument to useLoadable

const sleep = () => new Promise(done => done());

function App() {
  // this will take atleast 300ms to resolve
  const [{ loading, error, res }, onClick] = useLoadable(sleep, { delayMs: 300 });

  return (
    <button onClick={onClick}>{loading ? "Loading..." : "Load"}</button>
  );
}