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 => 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>
);
};