DefaultPropsProvider

This component controls the settings of the components provided by Suspensive (Suspense, Delay, etc.) at once.

import { DefaultProps, DefaultPropsProvider } from '@suspensive/react'
 
const defaultProps = new DefaultProps({
  Delay: {
    ms: 1200,
  },
  Suspense: {
    fallback: <Spinner />,
    clientOnly: false,
  },
})
 
function App() {
  return <DefaultPropsProvider defaultProps={defaultProps}>...</DefaultPropsProvider>
}

import { DefaultProps, DefaultPropsProvider, Suspense, Delay } from '@suspensive/react'
import { SuspenseQuery } from '@suspensive/react-query'
import { fetch1sQueryOptions } from './queries'

const defaultProps = new DefaultProps({
  Delay: {
    ms: 1200,
    fallback: <div style={{ padding: 10, background: 'lightyellow' }}>Loading additional content...</div>,
  },
  Suspense: {
    fallback: <div style={{ padding: 10, background: 'lightblue' }}>Fetching post...</div>,
    clientOnly: false,
  },
})

export const Example = () => {
  return (
    <DefaultPropsProvider defaultProps={defaultProps}>
      <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '300px', margin: '20px auto' }}>
        <Suspense>
          <SuspenseQuery {...fetch1sQueryOptions(1)}>
            {({ data }) => (
              <div style={{ padding: 15, background: '#f0f0f0' }}>
                <h2>{data.title}</h2>
                <p>ID: {data.id}</p>
                <Delay>
                  <div style={{ marginTop: 10, padding: 10, background: '#e0e0e0' }}>
                    <h3>Additional Details:</h3>
                    <p>{data.body}</p>
                  </div>
                </Delay>
              </div>
            )}
          </SuspenseQuery>
        </Suspense>
      </div>
    </DefaultPropsProvider>
  )
}

Open Sandbox

<ClientOnly/>wrap