DefaultPropsProvider

이 컴포넌트는 Suspensive가 제공하는 컴포넌트들(Suspense, Delay 등)의 설정을 한 번에 제어합니다.

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