All declarative components to use suspense on both CSR, SSR.
Features
- Suspense
- ErrorBoundary, useErrorBoundary, useErrorBoundaryFallbackProps
- ErrorBoundaryGroup, useErrorBoundaryGroup
- Delay
- SuspensiveProvider, Suspensive
- DevMode
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}>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.
Features
- useSuspenseQuery
- useSuspenseQueries
- useSuspenseInfiniteQuery
- QueryErrorBoundary
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={(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.
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 © Suspensive. See LICENSE for details.