react-suspendable

$3

> Not experimental. Available since React 16.6. Works with React Native.

Description

Suppose we want to use a Promise in our

``html


has asynchronous code and could throw exceptions


`

A Promise has three distinct states:

- PENDING - will render "Pending" by \
- REJECTED - will render "Rejected" by \, which is an Error Boundary implementation
- FULFILLED - will finally render our

Install

`sh
npm install --save @isumix/react-suspendable
`

`sh
yarn add @isumix/react-suspendable
`

Example

> 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(resolve => {
setTimeout(() => resolve("DELAYED"), 5000);
});

const useDelayedValue = makeSuspendableHook(promise);

const CustomComponent = () => {
const val = useDelayedValue();
return (



This component has a {val} value.


export default () => (
Waiting...}>


);
`

makeSuspendableHook

Create a new Hook from a Promise and return it

`ts
const useDelayedValue = makeSuspendableHook(promise);
`

> This is all you going to need

For library writers

makeSuspendable

Create a new suspendable object from a Promise and return it

`ts
const suspendable = makeSuspendable(promise);
`

useSuspendable

Hook that uses suspendable object and returns FULFILLED value or throws an exception

`ts
const val = useSuspendable(suspendable);
``