Luxizzle / react-promise-suspense

A React hook for resolving promises with Suspense support. <1kb bundle.

usePromise

React hook for resolving promises with Suspense support.

Inspired by fetch-suspense, but this one is not limited to fetch, usePromise works with any Promise.

Install

• npm install react-promise-suspense --save

Example

• Here's an Codesandbox example of a setTimeout delayed component.

• Awaiting a fetch promise:

import usePromise from 'react-promise-suspense';

const fetchJson = input => fetch(input).then(res => console.log(res) || res.json());

const MyFetchingComponent = () => {
  // usePromise(Promise, [inputs,],)
  const data = usePromise(fetchJson, [
    'https://pokeapi.co/api/v2/pokemon/ditto/',
    { method: 'GET' },
  ]);

  return <pre>{JSON.stringify(data, null, 2)}</pre>;
};

const App = () => {
  return (
    <Suspense fallback="Loading...">
      <MyFetchingComponent />
    </Suspense>
  );
};