tooooo1/suspensive

Packages to use React Suspense easily

Suspensive

OFFICIAL DOCS | VISUALIZATION | DEPENDENCY GRAPH

@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

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.Reset trigger={(group) => <button onClick={group.reset}>Reset All</button>} />
    <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, QueryAsyncBoundary

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