Suspensive

@suspensive/react

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

Features

• Suspense
• ErrorBoundary, ErrorBoundary.Consumer useErrorBoundary, useErrorBoundaryFallbackProps
• ErrorBoundaryGroup, ErrorBoundaryGroup.Consumer useErrorBoundaryGroup
• Delay
• Suspensive, SuspensiveProvider
• DevMode
• wrap

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}>Reset error: {props.error.message}</button>}>
      <Suspense
        fallback={
          <Delay ms={200}>
            <Spinner />
          </Delay>
        }
      >
        <SuspenseMaker />
      </Suspense>
    </ErrorBoundary>
  </ErrorBoundaryGroup>
)

@suspensive/react-query

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

Features

• useSuspenseQuery, useSuspenseQueries, useSuspenseInfiniteQuery
• queryOptions, infiniteQueryOptions
• SuspenseQuery, SuspenseQueries, SuspenseInfiniteQuery
• QueryErrorBoundary

Installation

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

pnpm add @suspensive/react-query @tanstack/react-query

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

Usage

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

const customQuery = () =>
  queryOptions({
    queryKey: ['queryKey'],
    queryFn: () => Promise.resolve({ text: 'Hello Suspensive' }),
  })

const SuspenseMaker = () => {
  const query = useSuspenseQuery(customQuery())
  return <>{query.data}</>
}

const Example = () => (
  <QueryErrorBoundary fallback={(props) => <button onClick={props.reset}>Reset error: {props.error.message}</button>}>
    <Suspense fallback={<Spinner />}>
      <SuspenseMaker />
    </Suspense>
    <Suspense fallback={<Spinner />}>
      <SuspenseQuery {...customQuery()} select={({ text }) => text}>
        {({ data: text }) => <>{text}</>}
      </SuspenseQuery>
    </Suspense>
  </QueryErrorBoundary>
)

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 © Viva Republica, Inc. See LICENSE for details.