# use-suspendable

> react dependency injection library

Latest version **0.0.1** (published 2021-02-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-suspendable
pnpm add use-suspendable
yarn add use-suspendable
bun add use-suspendable
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2021-02-05 |
| First published | 2021-02-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 123.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | buhichan |
| Maintainers | buhi |

## Links

- npm: https://www.npmjs.com/package/use-suspendable
- Repository: https://github.com/buhichan/use-suspendable
- Homepage: https://github.com/buhichan/use-suspendable#readme
- Issues: https://github.com/buhichan/use-suspendable/issues
- npm.io page: https://npm.io/package/use-suspendable

## Dependencies (1)

- [use-subscription](https://npm.io/package/use-subscription.md) ^1.5.1

## Recent versions

- 0.0.1 (latest) — 2021-02-05

## README

[![travis ci](https://travis-ci.com/buhichan/use-suspendable.svg?branch=master)](https://travis-ci.com/buhichan/use-suspendable)
[![codecov](https://codecov.io/gh/buhichan/use-suspendable/branch/master/graph/badge.svg)](https://codecov.io/gh/buhichan/use-suspendable)

# Intro

React use suspendable hook, suspendable means Promise, Observable, null or undefined.

Observable can be any observable that match the proposed observable API, like rxjs's Observable.

# Requirements

It requires Weakmap and Symbol to work.

# Notice

You **MUST** ensure Objest.is equality of the suspendables you pass between renders, or else this hook will treat them as changed and re-subscribe every time it's called.
For the same reason, you cannot create Promise or Observable under Suspense, it must be higher than Suspense in the component tree, like this:

- SomeContext1.Provider value={useMemo(()=>axios.get("/api"),[])}
    - SomeContext2.Provider value={useMemo(()=>require("rxjs").interval(1000),[])}
        - Suspense
            - const [response, interval] = useSuspendable(useContext(SomeContext1), useContext(SomeContext2))

Or you can use somekind of cache like react-cache to cache promise.

# Example

```tsx

function App(){
    return <SomeContext1.Provider value={useMemo(()=>axios.get("/api"),[])}>
        <SomeContext2.Provider value={useMemo(()=>require("rxjs").interval(1000),[])}>
            <React.Suspense fallback={"loading..."}>
                <Page />
            </React.Suspense>
        </SomeContext2.Provider>
    </SomeContext1.Provider>
}

function Page(){
    const [v1, v2, v3, v4] = useSuspendable(useContext(SomeContext1), useContext(SomeContext2), nullOrPromise, undefinedOrPromise)

    return <div>
        {v1}
        {v2}
        {v3}
        {v4}
    </div>
}
```

---
_Source: https://npm.io/package/use-suspendable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._