Integrates asynchronous code (Promise) within React's Suspense and Error Boundaries
npm install @isumix/react-suspendable> Not experimental. Available since React 16.6. Works with React Native.
Suppose we want to use a Promise in our
``html`
A Promise has three distinct states:
- PENDING - will render "Pending" by \
- REJECTED - will render "Rejected" by \
- FULFILLED - will finally render our
`sh`
npm install --save @isumix/react-suspendable
`sh`
yarn add @isumix/react-suspendable
> Play with web example in codesandbox.io
> Play with native example in snack.expo.io
`tsx
import React, { Suspense } from "react";
import { makeSuspendableHook } from "@isumix/react-suspendable";
const promise = new Promise
setTimeout(() => resolve("DELAYED"), 5000);
});
const useDelayedValue = makeSuspendableHook(promise);
const CustomComponent = () => {
const val = useDelayedValue();
return (
This component has a {val} value.
export default () => (
);
`
Create a new Hook from a Promise and return it
`ts`
const useDelayedValue = makeSuspendableHook(promise);
> This is all you going to need
Create a new suspendable object from a Promise and return it
`ts`
const suspendable = makeSuspendable(promise);
Hook that uses suspendable object and returns FULFILLED value or throws an exception
`ts``
const val = useSuspendable(suspendable);