DialogProvider
Context for opening dialogs from descendants.
useShowDialog registers and opens a dialog; useDialog exposes dialogs, activeDialog, and closeDialog.
Live example
Example controls
Usage
import { Button, Dialog, DialogProvider, useDialog, useShowDialog } from '@prosazhin/pbcomponents';
function Example() {
const { closeDialog } = useDialog();
const open = useShowDialog(() => (
<Dialog id='example'>
<Dialog.Content>
<Dialog.Header>Title</Dialog.Header>
<Dialog.Body>Content</Dialog.Body>
<Dialog.Footer>
<Button onClick={() => closeDialog('example')}>Close</Button>
</Dialog.Footer>
</Dialog.Content>
</Dialog>
));
return <Button onClick={open}>Open</Button>;
}
<DialogProvider>
<Example />
</DialogProvider>;Component API
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
children | ReactNode | Descendants that can use useDialog and useShowDialog. | — |
animationDuration | number | Dialog animation duration in milliseconds. | — |
className | string | Class of the root element. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.