Skip to main content

Dialog

Dialog renders a modal over the main content flow. Allows global control of the various dialog windows.

Demo​

Result
Loading...
Live Editor
//import {useDialogState, Button, Dialog, P} from 'koval-ui';

function Example(props) {
  const id = 'foo';

  const {openDialog} = useDialogState(id);
  const handleOpen = useCallback(() => {
    openDialog();
  }, [openDialog]);

  return (
    <Fragment>
      <Button onClick={handleOpen}>Open dialog</Button>
      <Dialog
        closeOnClickOutside={true}
        showCloseButton={true}
        closeLabel="Close"
        trapFocus={true}
        animation="slide-top"
        id={id}
        dialogTitle="This is the title of dialog!">
        <P>
          In the heart of Podil, street art tells stories of the past and present. Murals
          adorn the walls, each one a masterpiece that captures the essence of this
          eclectic district. Vinyl records spin in cozy cafes, where baristas craft lattes
          with intricate foam art. It’s a place where creativity flows as freely as the
          Dnipro River.
        </P>
      </Dialog>
    </Fragment>
  );
}

Props​

id​

type: string (required)

Provide unique id for Dialog

dialogTitle​

type: string

Set a title of Dialog

closeLabel​

type: string

Provide a localized value for close button

showCloseButton​

type: boolean

Display a close icon at the right top corner

closeOnClickOutside​

type: boolean

Dismiss Dialog when the user clicks anywhere on the page

trapFocus​

type: boolean

Enable a focus trap for Dialog

animation​

type: 'slide-top' | 'scale-in'

Select Dialog enter/exit animation style

onToggle​

type: (open: boolean) => void

Callback triggered when Dialog toggles

actions​

type: Array<ComponentProps<typeof ActionButton> | [ComponentProps<typeof ActionButton>, ComponentProps<typeof ActionButton>]>

Provide an array of actions with callbacks

useDialogState hook interface​

useDialogState uses Koval Global Context, so it works anywhere in the application. Developers can put Dialog in the other component.

openDialog​

Show a dialog to the user. openDialog allows sending additional parameters to be used inside Dialog.

const {openDialog} = useDialogState('foo');

const handleClick = useCallback(() => {
  openDialog(params?: Record<string, unknown>);
}, [openDialog]);

closeDialog​

Hide dialog.

const {closeDialog} = useDialogState('foo');

const handleClick = useCallback(() => {
  closeDialog();
}, [closeDialog]);

isOpen​

Current visibility of the dialog.

dialogParams​

Reports current Dialog parameters from the global state.

Multiple Dialogs​

It's possible to have multiple active dialogs on the page. E.g., when a developer wants to show another modal window from currently active. Global state is built on first in - last out principle.

Example​

Result
Loading...
Live Editor
//import {useDialogState, Button, Dialog, P} from 'koval-ui';

function Example(props) {
  const {closeDialog: closeFirst, openDialog: openFirst} = useDialogState('baz');
  const {closeDialog: closeSecond, openDialog: openSecond} = useDialogState('qux');

  const actionsFirst = useMemo(
    () => [
      [
        {title: 'Close First', type: 'danger', onClick: closeFirst},
        {
          title: 'Open Second',
          type: 'success',
          onClick: () => {
            openSecond();
          },
        },
      ],
    ],
    [closeFirst, openSecond]
  );

  const actionsSecond = useMemo(
    () => [{title: 'Close Second', type: 'danger', onClick: closeSecond}],
    [closeSecond]
  );

  return (
    <Fragment>
      <ButtonGroup>
        <Button onClick={openFirst}>Open first Dialog</Button>
        <Button onClick={openSecond}>Open second Dialog</Button>
      </ButtonGroup>
      <Dialog id="baz" actions={actionsFirst} showCloseButton={false}>
        <P>
          This is <Strong>first</Strong> Dialog.
        </P>
      </Dialog>
      <Dialog id="qux" actions={actionsSecond} showCloseButton={false}>
        <P>
          This is <Strong>second</Strong> Dialog.
        </P>
      </Dialog>
    </Fragment>
  );
}

Configuring actions​

See the Actions API page