🎉 Suspensive v2 was released! read more →
Documentation
@suspensive/react
<DevMode/>

<DevMode/>

⚠️

<DevMode/> is experimental feature, this interfaces could be changed

<DevMode/> can control <Suspense/>, <ErrorBoundary/> to develop each fallback easily This will work in only development mode, and in production mode(on build app), these apis will be gratefully removed

Setup

After setup <DevMode/>, We can use devMode prop for each component

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>
  )
}

<Suspense/> devMode prop

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

<ErrorBoundary/> devMode prop

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>
)
<SuspensiveProvider/>wrap