OFFICIAL DOCS | VISUALIZATION | CONTRIBUTING | LICENSE

@suspensive/react

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

Features

• Suspense (containing CSROnly mode)
• ErrorBoundary
• ErrorBoundaryGroup, useErrorBoundaryGroup
• AsyncBoundary (CSROnly mode)
• Delay (Experimental)
• SuspensiveProvider, SuspensiveConfigs (Experimental)
• HOC(Higher Order Component)s for all components

Installation

npm install @suspensive/react

yarn add @suspensive/react

pnpm 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

• QueryErrorBoundary, QueryAsyncBoundary
• useSuspenseQuery
• useSuspenseInfiniteQuery

Installation

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

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

pnpm add @suspensive/react @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(key, queryFn, options)

  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.

License

MIT © Suspensive. See LICENSE for details.

^Suspensive