diff --git a/README.md b/README.md index 785ece8..fac30e5 100644 --- a/README.md +++ b/README.md @@ -96,6 +96,40 @@ const accepted = await Confirm.call({ message: 'Continue?' }) Check out [the demo site](https://react-call.desko.dev/) to see some live examples of other React components being called. +# Lazy loading + +Use React.lazy to code-split callable components and load them on demand. + +```tsx +import { createCallable } from 'react-call' +import { lazy, Suspense } from 'react' + +// 1) Lazy-load your component +const Confirm = createCallable( + lazy(() => import('./Confirm')), // default export required +) + +// 2) Place Root inside a Suspense boundary +export function App() { + return ( + <> + {/* Other app UI */} + + + + + ) +} + +// 3) Call it as usual (component is fetched on first call) +const accepted = await Confirm.call({ message: 'Continue?' }) +``` + +Notes: +- Make sure the lazily imported file has a default export (React.lazy requirement). +- Wrap `` (or an ancestor) in `` to handle the loading state. +- The lazy component is split into a separate chunk and downloaded only when first called. + # Advanced usage ## End from caller