import { Suspensive, SuspensiveProvider, DevMode } from '@suspensive/react'
 
const App = () => {
  const [suspensive] = useState(() => new Suspensive())
 
  return (
    <SuspensiveProvider value={suspensive}>
      {/** in children, we can use devMode now */}
      <DevMode />
    </SuspensiveProvider>
  )
}

import { Suspense } from '@suspensive/react'
 
const Example = () => (
  <Suspense
    fallback={<>loading...</>}
    devMode={{
      // use devMode prop, and click `<DevMode/>` in display
      showFallback: true,
    }}
  >
    children
  </Suspense>
)

import { ErrorBoundary } from '@suspensive/react'
 
const Example = () => (
  <ErrorBoundary
    fallback={({ error }) => <>{error.message}</>}
    devMode={{
      // use devMode prop, and click `<DevMode/>` in display
      showFallback: true,
    }}
  >
    children
  </ErrorBoundary>
)

import { ErrorBoundary } from '@suspensive/react'
 
const Example = () => (
  <ErrorBoundary
    fallback={({ error }) => <>{error.message}</>}
    devMode={{
      // use devMode prop, and click `<DevMode/>` in display
      showFallback: { after: 2000 },
    }}
  >
    children
  </ErrorBoundary>
)