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/reactpnpm add @suspensive/reactyarn add @suspensive/reactimport { 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-querypnpm add @suspensive/react-queryyarn add @suspensive/react-queryimport { 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.