AsyncBoundary (deprecated)

🚫

deprecated: Use <Suspense/>, <ErrorBoundary/> directly

<AsyncBoundary/> wraps @suspensive/react's <Suspense/> and <ErrorBoundary/> to use them at once.

import { AsyncBoundary } from '@suspensive/react'
 
const Example = () => (
  <AsyncBoundary
    pendingFallback={<Loading />}
    rejectedFallback={(props) => (
      <>
        <button onClick={props.reset}>Try again</button>
        {props.error.message}
      </>
    )}
    onReset={() => console.log('reset')}
    onError={(error) => console.log(error)}
  >
    <Children />
  </AsyncBoundary>
)

AsyncBoundaryProps

🚫

deprecated: Use SuspenseProps and ErrorBoundaryProps directly

type AsyncBoundaryProps = Omit<SuspenseProps, 'fallback'> &
  Omit<ErrorBoundaryProps, 'fallback'> & {
    pendingFallback?: SuspenseProps['fallback']
    rejectedFallback: ErrorBoundaryProps['fallback']
  }

withAsyncBoundary

🚫

deprecated: Use wrap.ErrorBoundary().Suspense().on instead

You can use withAsyncBoundary to wrap component by <AsyncBoundary/> easily. we don't need to make unncessary code to wrap it if we use withAsyncBoundary like below. withAsyncBoundary's 2nd parameter is props of <AsyncBoundary/> without children

import { withAsyncBoundary } from '@suspensive/react'
 
const Example = withAsyncBoundary(
  function Component() {
    return <>...</>
  },
  {
    pendingFallback: <Loading />,
    rejectedFallback: (props) => (
      <>
        <button onClick={props.reset}>Try again</button>
        {props.error.message}
      </>
    ),
    onReset: () => console.log('reset'),
    onError: (error) => console.log(error),
  }
)