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

PropType / variantsPurposeDefault
childrenReactNodeDescendants that can use useDialog and useShowDialog.—
animationDurationnumberDialog animation duration in milliseconds.—
classNamestringClass of the root element.—

Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.