Suspensive

Packages to use React Suspense easily

README

Suspensive Libraries Logo - TypeScript/JavaScript packages to use React Suspense easily.

Suspensive


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

Features


- Suspense
- ErrorBoundary, ErrorBoundary.Consumer useErrorBoundary, useErrorBoundaryFallbackProps
- ErrorBoundaryGroup, ErrorBoundaryGroup.Consumer useErrorBoundaryGroup
- Delay
- Suspensive, SuspensiveProvider
- DevMode
- wrap

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'

  3. const Example = () => (
  4.   <ErrorBoundaryGroup>
  5.     <ErrorBoundaryGroup.Consumer>
  6.       {(group) => <button onClick={group.reset}>Reset All</button>}
  7.     </ErrorBoundaryGroup.Consumer>
  8.     <ErrorBoundary fallback={(props) => <button onClick={props.reset}>Reset error: {props.error.message}</button>}>
  9.       <Suspense
  10.         fallback={
  11.           <Delay ms={200}>
  12.             <Spinner />
  13.           </Delay>
  14.         }
  15.       >
  16.         <SuspenseMaker />
  17.       </Suspense>
  18.     </ErrorBoundary>
  19.   </ErrorBoundaryGroup>
  20. )
  21. ```

@suspensive/react-query


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

Features


- useSuspenseQuery, useSuspenseQueries, useSuspenseInfiniteQuery
- SuspenseQuery, SuspenseInfiniteQuery
- QueryErrorBoundary
- queryOptions

Installation


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

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

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

Usage


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

  4. const customQuery = () =>
  5.   queryOptions({
  6.     queryKey: ['queryKey'],
  7.     queryFn: () => Promise.resolve({ text: 'Hello Suspensive' }),
  8.   })

  9. const SuspenseMaker = () => {
  10.   const query = useSuspenseQuery(customQuery())
  11.   return <>{query.data}</>
  12. }

  13. const Example = () => (
  14.   <QueryErrorBoundary fallback={(props) => <button onClick={props.reset}>Reset error: {props.error.message}</button>}>
  15.     <Suspense fallback={<Spinner />}>
  16.       <SuspenseMaker />
  17.     </Suspense>
  18.     <Suspense fallback={<Spinner />}>
  19.       <SuspenseQuery {...customQuery()} select={({ text }) => text}>
  20.         {({ data: text }) => <>{text}</>}
  21.       </SuspenseQuery>
  22.     </Suspense>
  23.   </QueryErrorBoundary>
  24. )
  25. ```



Docs


We provide Official Docs