minsoo-web / react

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 (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}</>
}

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