suspensive / react

Packages to use React Suspense & ErrorBoundary easily (one of Tanstack Query v4's community resources)

Suspensive

OFFICIAL DOCS | VISUALIZATION | DEPENDENCY GRAPH

@suspensive/react

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

npm install @suspensive/react

pnpm add @suspensive/react

yarn add @suspensive/react

Usage

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

const Example = () => (
  <ErrorBoundaryGroup>
    <ErrorBoundaryGroup.Consumer>
      {(group) => <button onClick={group.reset}>Reset All</button>}
    </ErrorBoundaryGroup.Consumer>
    <ErrorBoundary fallback={(props) => <button onClick={props.reset}>Reset error: {props.error.message}</button>}>
      <Suspense
        fallback={
          <Delay ms={200}>
            <Spinner />
          </Delay>
        }
      >
        <SuspenseMaker />
      </Suspense>
    </ErrorBoundary>
  </ErrorBoundaryGroup>
)

@suspensive/react-query

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

Features

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

Installation

npm install @suspensive/react-query @tanstack/react-query@4

pnpm add @suspensive/react-query @tanstack/react-query@4

yarn add @suspensive/react-query @tanstack/react-query@4

Usage

import { Suspense } from '@suspensive/react'
import { QueryErrorBoundary, useSuspenseQuery, SuspenseQuery, queryOptions } from '@suspensive/react-query'

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

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

const Example = () => (
  <QueryErrorBoundary fallback={(props) => <button onClick={props.reset}>Reset error: {props.error.message}</button>}>
    <Suspense fallback={<Spinner />}>
      <SuspenseMaker />
    </Suspense>
    <Suspense fallback={<Spinner />}>
      <SuspenseQuery {...customQuery()} select={({ text }) => text}>
        {({ data: text }) => <>{text}</>}
      </SuspenseQuery>
    </Suspense>
  </QueryErrorBoundary>
)

Docs

We provide Official Docs

See OFFICIAL DOCS

Visualization

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

License

MIT © Suspensive. See LICENSE for details.

^Suspensive