Suspensive
Packages to use React Suspense easily
README
Suspensive
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
- ```shell
- npm install @suspensive/react
- ```
- ```shell
- pnpm add @suspensive/react
- ```
- ```shell
- yarn add @suspensive/react
- ```
Usage
- ```tsx
- 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
- SuspenseQuery, SuspenseInfiniteQuery
- QueryErrorBoundary
- queryOptions
Installation
- ```shell
- npm install @suspensive/react-query @tanstack/react-query@4
- ```
- ```shell
- pnpm add @suspensive/react-query @tanstack/react-query@4
- ```
- ```shell
- yarn add @suspensive/react-query @tanstack/react-query@4
- ```
Usage
- ```tsx
- 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