Suspensive

OFFICIAL DOCS | VISUALIZATION | DEPENDENCY GRAPH

@suspensive/react

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

Features

Suspense (containing CSROnly mode)
ErrorBoundary
ErrorBoundaryGroup
AsyncBoundary (containing CSROnly mode)
Delay
SuspensiveProvider
HOC(Higher Order Component)s
useAwait, Await, awaitClient (Experimental)

Installation

npm install @suspensive/react

pnpm add @suspensive/react

yarn add @suspensive/react

Usage

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

const Example = (
  <ErrorBoundaryGroup>
    <ErrorBoundaryGroup.Reset trigger={(group) => <Button onClick={group.reset}>Reset All</Button>} />
    <ErrorBoundary fallback={(caught) => <Button onClick={caught.reset}>Reset {caught.error}</Button>}>
      <Suspense fallback={<Spinner />}>
        <SuspendedComponent />
      </Suspense>
    </ErrorBoundary>
    <ErrorBoundary fallback={(caught) => <Button onClick={caught.reset}>Reset {caught.error}</Button>}>
      <Suspense fallback={<Spinner />}>
        <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={(caught) => <Button onClick={caught.reset}>Reset {caught.error}</Button>}>
    <Suspense fallback={<Spinner />}>
      <SuspendedComponent />
    </Suspense>
  </QueryErrorBoundary>
)

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

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