44 lines
1.5 KiB
Markdown
44 lines
1.5 KiB
Markdown
# usePromise
|
|
|
|
React hook for resolving promises with Suspense support.
|
|
|
|
Inspired by [fetch-suspense](https://github.com/CharlesStover/fetch-suspense), but this one is not limited to fetch, `usePromise` works with any Promise.
|
|
|
|
[](https://www.npmjs.com/package/react-promise-suspense)
|
|
[](https://www.npmjs.com/package/react-promise-suspense)
|
|
[](https://www.npmjs.com/package/react-promise-suspense)
|
|
[](https://www.npmjs.com/package/react-promise-suspense)
|
|
|
|
## Install
|
|
|
|
* `npm install react-promise-suspense --save`
|
|
|
|
## Example
|
|
|
|
- Here's an [Codesandbox example](https://codesandbox.io/s/react-promise-suspense-example-t14mh) of a setTimeout delayed component.
|
|
|
|
- Awaiting a fetch promise:
|
|
```js
|
|
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>
|
|
);
|
|
};
|
|
```
|