woody-morgan / suspensive

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, useErrorBoundary, useErrorBoundaryFallbackProps
• ErrorBoundaryGroup, useErrorBoundaryGroup
• Delay
• SuspensiveProvider, Suspensive
• DevMode

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}>Try again</button>
          {props.error.message}
        </>
      )}
    >
      <Suspense
        fallback={
          <Delay>
            <Spinner />
          </Delay>
        }
      >
        <SuspendedComponent />
      </Suspense>
    </ErrorBoundary>
  </ErrorBoundaryGroup>
)

@suspensive/react-query

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

Features

• useSuspenseQuery
• useSuspenseQueries
• useSuspenseInfiniteQuery
• QueryErrorBoundary

Installation

npm install @suspensive/react-query

pnpm add @suspensive/react-query

yarn add @suspensive/react-query

Usage

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

const Example = () => (
  <QueryErrorBoundary
    fallback={(props) => (
      <>
        <button onClick={props.reset}>Try again</button>
        {props.error.message}
      </>
    )}
  >
    <Suspense fallback={<Spinner />}>
      <SuspendedComponent />
    </Suspense>
  </QueryErrorBoundary>
)

const SuspendedComponent = () => {
  const query = useSuspenseQuery({
    queryKey,
    queryFn,
  })

  return <>{query.data}</>
}

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