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