useDialog

The useDialog hook allows you to create accessible dialog components that behave consistent across devices and browsers. Additionally, the hook provides your component with proper focus behaviours and ARIA accessibility props.

Features

• Native HTML <dialog> support.
• Focus the dialog on mount if no child element is focused yet.
• Cross browser support and normalization.
• Full ARIA accessibility support.

Synergy

• To contain the focus inside the dialog combine with Focus Scope.
• For scolling to be prevented in the application behind the dialog combine with usePreventScroll.
• To improve accessibility by hiding the content behind the dialog for screen readers combine with useModal.
• To close the dialog when the user clicks on the outside or presses the Escape key combine with useOverlay.

Anatomy

A dialog is an element that shows a dialog box which sits on top of the remaining content of the application. It contains a container element as well as an optional title.

If the dialog does not include a title, an aria-label aria-labelledby prop need to be provided to support assistive technology such as screen readers.

Example

function Example() {
  const ref = useRef(null);
  const { dialogProps, titleProps } = useDialog({
    children: 'Dialog Content',
    size: 'medium'
  }, ref);

  return (
    <dialog {...dialogProps} ref={ref}>
      <h1 {...titleProps}>Dialog Title</h1>

      {dialogProps.children}
    </dialog>
  );
}

function Example() {
  const ref = useRef(null);
  const { dialogProps, titleProps } = useDialog({
    children: 'Dialog Content',
    size: 'medium'
  }, ref);

  return (
    <dialog {...dialogProps} ref={ref}>
      <h1 {...titleProps}>Dialog Title</h1>

      {dialogProps.children}
    </dialog>
  );
}

function Example() {
  const ref = useRef(
    null
  );
  const {
    dialogProps,
    titleProps
  } = useDialog({
    children:
      'Dialog Content',
    size: 'medium'
  }, ref);

  return (
    <dialog
      {...dialogProps}
      ref={ref}
    >
      <h1
        {...titleProps}
      >
        Dialog Title
      </h1>

      {dialogProps
        .children}
    </dialog>
  );
}