An open API service indexing awesome lists of open source software.

https://github.com/toss/suspensive

All-in-one for React Suspense — ErrorBoundary with shouldCatch, SSR-safe Suspense, Delay, and more
https://github.com/toss/suspensive

async errorboundary react react-query ssr suspense suspensive

Last synced: 18 days ago
JSON representation

All-in-one for React Suspense — ErrorBoundary with shouldCatch, SSR-safe Suspense, Delay, and more

Awesome Lists containing this project

README

          



Suspensive — All-in-one for React Suspense


npm version
npm downloads
GitHub stars
MIT License


## What is Suspensive?

React gives you Suspense, lazy, and an interface to build Error Boundaries — but using them in real applications reveals gaps. **Suspensive fills those gaps** with declarative components and hooks.

```tsx
import { Delay, ErrorBoundary, ErrorBoundaryGroup, Suspense } from '@suspensive/react'

const Page = () => (


{({ reset }) => Reset All}

}
>

{({ isDelayed }) => }

}
>




)
```

- **`shouldCatch`** — catch only specific error types, let others propagate
- **`ErrorBoundaryGroup`** — reset multiple error boundaries at once, no prop drilling
- **`clientOnly`** — SSR-safe Suspense that avoids hydration mismatches in Next.js
- **`Delay`** — prevent flash-of-loading-state with render props for smooth fade-in
- **`reset`** — built into the fallback props, no external state needed

## Packages

| Package | Description | Version |
| ----------------------------------------------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [@suspensive/react](https://suspensive.org/docs/react/motivation) | Suspense, ErrorBoundary, ErrorBoundaryGroup, Delay, ClientOnly | [![npm](https://img.shields.io/npm/v/@suspensive/react?style=flat-square&colorA=000&colorB=000)](https://www.npmjs.com/package/@suspensive/react) |
| [@suspensive/react-query](https://suspensive.org/docs/react-query/motivation) | SuspenseQuery, SuspenseInfiniteQuery, Mutation, PrefetchQuery | [![npm](https://img.shields.io/npm/v/@suspensive/react-query?style=flat-square&colorA=000&colorB=000)](https://www.npmjs.com/package/@suspensive/react-query) |
| [@suspensive/jotai](https://suspensive.org/docs/jotai/motivation) | Atom, AtomValue, SetAtom for Jotai integration | [![npm](https://img.shields.io/npm/v/@suspensive/jotai?style=flat-square&colorA=000&colorB=000)](https://www.npmjs.com/package/@suspensive/jotai) |
| [@suspensive/codemods](https://suspensive.org/docs/codemods/motivation) | Automated migration codemods | [![npm](https://img.shields.io/npm/v/@suspensive/codemods?style=flat-square&colorA=000&colorB=000)](https://www.npmjs.com/package/@suspensive/codemods) |

## Key Features

- **``** with `shouldCatch` — catch only the errors you want ([comparison with react-error-boundary](https://suspensive.org/docs/react/comparison))
- **``** — reset multiple error boundaries at once, no prop drilling
- **``** with `clientOnly` — SSR-safe Suspense that just works in Next.js
- **``** — declarative data fetching as JSX, no hook constraints
- **``** — prevent flash-of-loading-state UX issues
- **``** — set global default fallbacks for all components

## Getting Started

```bash
npm install @suspensive/react
```

Visit **[suspensive.org](https://suspensive.org)** for full documentation.

[English](https://suspensive.org/en) | [한국어](https://suspensive.org/ko)

## Contributors

Read our [Contributing Guide](./CONTRIBUTING.md) to familiarize yourself with Suspensive's development process, how to suggest bug fixes and improvements, and the steps for building and testing your changes.









Toss

MIT © Viva Republica, Inc. See [LICENSE](./LICENSE) for details.