@reach/dialog is a React component library that provides accessible modal dialogs. It ensures that dialogs are properly announced to screen readers and that focus is managed correctly, making it easier to build accessible web applications.

What are @reach/dialog's main functionalities?

Basic Dialog

This code demonstrates a basic usage of the @reach/dialog package. It shows how to open and close a dialog with a button click.

import { Dialog } from '@reach/dialog';
import '@reach/dialog/styles.css';

function BasicDialogExample() {
  const [showDialog, setShowDialog] = React.useState(false);
  return (
    <div>
      <button onClick={() => setShowDialog(true)}>Open Dialog</button>
      {showDialog && (
        <Dialog onDismiss={() => setShowDialog(false)}>
          <p>This is a basic dialog.</p>
          <button onClick={() => setShowDialog(false)}>Close</button>
        </Dialog>
      )}
    </div>
  );
}

Dialog with Custom Styling

This example shows how to apply custom styles to the dialog component.

import { Dialog } from '@reach/dialog';
import '@reach/dialog/styles.css';

function CustomStyledDialog() {
  const [showDialog, setShowDialog] = React.useState(false);
  return (
    <div>
      <button onClick={() => setShowDialog(true)}>Open Custom Dialog</button>
      {showDialog && (
        <Dialog
          onDismiss={() => setShowDialog(false)}
          style={{ background: 'lightblue', padding: '20px' }}
        >
          <p>This is a custom styled dialog.</p>
          <button onClick={() => setShowDialog(false)}>Close</button>
        </Dialog>
      )}
    </div>
  );
}

Dialog with Focus Management

This example demonstrates how to manage focus within the dialog, ensuring accessibility for keyboard and screen reader users.

import { Dialog } from '@reach/dialog';
import '@reach/dialog/styles.css';

function FocusManagedDialog() {
  const [showDialog, setShowDialog] = React.useState(false);
  return (
    <div>
      <button onClick={() => setShowDialog(true)}>Open Focus Managed Dialog</button>
      {showDialog && (
        <Dialog
          onDismiss={() => setShowDialog(false)}
          initialFocusRef={React.useRef(null)}
        >
          <p>This dialog manages focus correctly.</p>
          <button onClick={() => setShowDialog(false)}>Close</button>
        </Dialog>
      )}
    </div>
  );
}

Other packages similar to @reach/dialog

Readme

Source

@reach/dialog

Docs | Source | WAI-ARIA

An accessible dialog or modal window.

import { Dialog } from "@reach/dialog";
import "@reach/dialog/styles.css";

function Example(props) {
  const [showDialog, setShowDialog] = React.useState(false);
  const open = () => setShowDialog(true);
  const close = () => setShowDialog(false);

  return (
    <div>
      <button onClick={open}>Open Dialog</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Close</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>Hello there. I am a dialog</p>
      </Dialog>
    </div>
  );
}

FAQs

What is @reach/dialog?

Is @reach/dialog popular?

Is @reach/dialog well maintained?

Last updated on 27 Nov 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install