Suspensive

Packages to use React Suspense easily

Error handlingReactReact Server Components
suspensive/reactsuspensive.org@suspensive/react

README

Suspensive Libraries Logo

@suspensive/react


All declarative components to use suspense on both CSR, SSR.

Features


- Suspense, withSuspense (containing CSROnly)
- ErrorBoundary, withErrorBoundary, useErrorBoundary, useErrorBoundaryFallbackProps
- ErrorBoundaryGroup, withErrorBoundaryGroup, useErrorBoundaryGroup
- AsyncBoundary, withAsyncBoundary (containing CSROnly)
- Delay, withDelay
- SuspensiveProvider, Suspensive

Installation


  1. ```shell
  2. npm install @suspensive/react
  3. ```

  1. ```shell
  2. pnpm add @suspensive/react
  3. ```

  1. ```shell
  2. yarn add @suspensive/react
  3. ```

Usage


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

  4. const Example = () => (
  5.   <ErrorBoundaryGroup>
  6.     <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Reset All</button>} />
  7.     <ErrorBoundary
  8.       fallback={(props) => (
  9.         <>
  10.           <button onClick={props.reset}>Try again</button>
  11.           {props.error.message}
  12.         </>
  13.       )}
  14.     >
  15.       <Suspense
  16.         fallback={
  17.           <Delay>
  18.             <Spinner />
  19.           </Delay>
  20.         }
  21.       >
  22.         <SuspendedComponent />
  23.       </Suspense>
  24.     </ErrorBoundary>
  25.   </ErrorBoundaryGroup>
  26. )
  27. ```




@suspensive/react-query


npm version
npm
npm bundle size

Declarative apis to use @tanstack/react-query with suspense easily.

Features


- useSuspenseQuery
- useSuspenseQueries
- useSuspenseInfiniteQuery
- QueryErrorBoundary, QueryAsyncBoundary

Installation


  1. ```shell
  2. npm install @suspensive/react-query
  3. ```

  1. ```shell
  2. pnpm add @suspensive/react-query
  3. ```

  1. ```shell
  2. yarn add @suspensive/react-query
  3. ```

Usage


  1. ```tsx
  2. import { Suspense } from '@suspensive/react'
  3. import { QueryErrorBoundary, useSuspenseQuery } from '@suspensive/react-query'

  5. const Example = () => (
  6.   <QueryErrorBoundary
  7.     fallback={(props) => (
  8.       <>
  9.         <button onClick={props.reset}>Try again</button>
  10.         {props.error.message}
  11.       </>
  12.     )}
  13.   >
  14.     <Suspense fallback={<Spinner />}>
  15.       <SuspendedComponent />
  16.     </Suspense>
  17.   </QueryErrorBoundary>
  18. )

  20. const SuspendedComponent = () => {
  21.   const query = useSuspenseQuery({
  22.     queryKey,
  23.     queryFn,
  24.   })

  26.   return <>{query.data}</>
  27. }
  28. ```



Docs


deployment

We provide Official Docs

See OFFICIAL DOCS



Visualization

deployment

Concepts Visualization ready. You can see core concepts of Suspensive visually

See VISUALIZATION.

Contributing


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

Contributors


contributors

License


MIT © Suspensive. See LICENSE for details.

Suspensive Suspensive