useDialogLazy

import { useDialogLazy } from 'react-dialog-async';

Similar to useDialog, but allows the dialog component to be loaded asynchronously. This is useful for code-splitting and reducing the initial bundle size.

It must be called within a <DialogProvider/>.

Usage

const MyDialog = () => import('./MyDialog');

const myDialog = useDialogLazy(MyDialog);

// Preload the dialog component ahead of time (optional)
myDialog.preload();

const handleClick = async () => {
  // Same as useDialog
  const result = await myDialog.open();
}

Signature

function useDialogLazy<D, R, DE extends D | undefined>(
  componentLoader: () => Promise<AsyncDialogComponent<D, R>>,
  options?: useDialogOptions<D, DE>,
): useDialogLazyReturn<D, R, DE>

Parameters

Parameter	Type	Default	Description
componentLoader	() => Promise<AsyncDialogComponent<D, R>>	-	A function to load the dialog component
options	useDialogOptions	{}	Optional configuration options.

AsyncDialogComponent

A React component that accepts props of type AsyncDialogProps. See AsyncDialogProps for details.

useDialogOptions

See useDialogOptions for details.

Returns

useDialogLazyReturn

Extends useDialogReturn

Property	Type	Description
preload	() => Promise<void>	Preloads the dialog, so that it will be immediately available when open() is called

Source

View on GitHub