All declarative components to use suspense on both CSR, SSR.
- Suspense, withSuspense (containing CSROnly)
- ErrorBoundary, withErrorBoundary, useErrorBoundary
- ErrorBoundaryGroup, withErrorBoundaryGroup, useErrorBoundaryGroup
- AsyncBoundary, withAsyncBoundary (containing CSROnly)
- Delay, withDelay
- SuspensiveProvider, Suspensive
- Await, useAwait, awaitClient (Experimental)
npm install @suspensive/react
pnpm add @suspensive/react
yarn add @suspensive/react
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>
)
Declarative apis to use @tanstack/react-query with suspense easily.
- useSuspenseQuery
- useSuspenseQueries
- useSuspenseInfiniteQuery
- QueryErrorBoundary, QueryAsyncBoundary
npm install @suspensive/react-query
pnpm add @suspensive/react-query
yarn add @suspensive/react-query
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}</>
}
We provide Official Docs
See OFFICIAL DOCS
Concepts Visualization ready. You can see core concepts of Suspensive visually
See VISUALIZATION.
MIT © Suspensive. See LICENSE for details.