this unassuming library provides a `` component which is designed to work together w/ the [`` component from the React API](https://reactjs.org/docs/concurrent-mode-suspense.html) in order to facilitate whatever **suspension logic** you may wish to implement in your [React](https://reactjs.org/) app, with an initial focus on _content fulfillment_ and _user experience pacing_ as the primary use cases
[](https://www.npmjs.com/package/resuspend)
## getting started
to install the latest stable version:
```sh
npm i resuspend -S
```
to import it into a module:
```js
import { Suspension } from 'resuspend';
```
## basic example
here's a simple example of a `` component that waits for some amount of time specified by its `duration` prop before finally rendering its `children` prop:
```jsx
import { Suspense, useState, useEffect } from 'react';
import { Suspension } from 'resuspend';
export function DramaticPause(props) {
// state mapped to the activation status
const [show, setShow] = useState(!props.duration);
// activation effect - called when the activation status is set to active
useEffect(
function waitAndThenShow() {
if (!show) {
const timeoutId = setTimeout(() => setShow(true), props.duration);
// cleanup callback
return () => clearTimeout(timeoutId);
}
},
[show, props.duration]
);
return (
[pausing dramatically...]}>
{props.children}
);
}
```
[try it out in a live editor via CodeSandbox ✨](https://codesandbox.io/s/resuspend-basic-example-lurxwz?file=/src/DramaticPause.jsx)
### props reference
as you can see here above w/ the `` component working in conjuntion w/ the `useEffect` hook:
- the `active` prop is used to declare whether its _activation status_ is _active_ or _inactive_
- the `waitAndTheShow` effect is used to declare an _activation effect_ to specify what happens when its _activation status_ is switched to _active_ or _inactive_
> essentially, the **suspension logic** is composed of and encapsulated by these values.
## data fetching example
more commonly, your **suspension logic** will probably involve fetching some data from a remote API service and rendering it in some kind of way.
here's a simple example of a `` component that does just that:
```jsx
import { Suspense, useState, useEffect } from 'react';
import { Suspension } from 'resuspend';
export function UserStatus(props) {
// state mapped to the activation status
const [status, setStatus] = useState();
// activation effect - called when the activation status is set to active
useEffect(
function fetchStatus() {
if (!status) {
fetch(`/api/status/${props.userId}`)
.then((response) => response.json())
.then((data) => setStatus(data.status));
}
x;
},
[status, props.userId]
);
return (
[fetching status...]}>
{status}
);
}
```
[try it out now in a live editor via CodeSandbox ✨](https://codesandbox.io/s/resuspend-data-fetching-example-quote-of-the-day-zlbpjm?file=/src/QuoteOfTheDay.jsx)
## activation
to set the _activation status_ to _active_, you would simply assign the prop `active={true}`:
```jsx
[pausing dramatically...]}>
you will not be seeing this text (except here in code) 👀
```
that's all you need to activate a `` component, consequently triggering its ancestral `` component and causing it to suspend updating and rendering of its children and instead rendering its `fallback` prop.
## inactivation
likewise to set the _activation status_ to _inactive_, you would simply assign the prop `active={false}`:
```jsx
[pausing dramatically...]}>
you will be seeing this text 👀
```
you may also assign a callback to the `active` prop and it will be evaluated to _active_ (for truthy values) or _inactive_ (for falsey values.)
```jsx
[pausing randomly and dramatically...]}>
Math.random() >= 0.5}>
you will maybe be seeing this text 👀
```
## reactivation
in general, using a basic callback is a fine way to switch an _activation status_ from _inactive_ to _active_. this callback can simply be attached to a `useEffect` hook or perhaps to some UI element event, e.g. a button click:
```jsx
import { Suspense, useState, useCallback } from 'react';
import { Suspension } from 'resuspend';
export function DramaticPause(props) {
// state mapped to the activation status
const [show, setShow] = useState(!props.duration);
// activation effect callback - called when the activation status is set to active
useEffect(
function waitAndThenShow() {
if (!show) {
const timeoutId = setTimeout(() => setShow(true), props.duration);
// cleanup callback - called when the activation status is switched to inactive
return () => clearTimeout(timeoutId);
}
},
[show, props.duration]
);
// (re)activation callback
const reload = useCallback(() => setShow(false));
return (
<>
[pausing dramatically...]}>
{props.children}
);
}
```
[try it out now in a live editor via CodeSandbox ✨](https://codesandbox.io/s/resuspend-basic-example-w-reactivation-kjijso?file=/src/DramaticPause.jsx)
## lifecycle
as implied so far, a `` component may be _activated_, _deactivated_, then _reactivated_ and _deactivated_ again, and so on until it's unmounted.
this flow of state encapsulates the _lifecycle_ of `` components, and is designed intentionally to provide a level of continuity and reusability you'd expect from a decent React component library (especially one whose name starts with `re-`!)
---
_Source: https://npm.io/package/resuspend · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
