@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>
  );
}

Current Tags

• 0.10.3                                ...           latest (5 years ago)
• 0.4.0-beta.0                                ...           next (6 years ago)

4 Versions

• 0.17.0                                ...           3 years ago
• 0.4.0                                ...           6 years ago
• 0.4.0-beta.0                                ...           6 years ago
• 0.10.3                                ...           5 years ago