Negating Past Mistakes

    @reach/dialog
    TypeScript icon, indicating that this package has built-in type declarations

    0.17.0 • Public • Published

    @reach/dialog

    Stable release MIT license

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

    Keywords

    none

    Install

    npm i @reach/dialog

    DownloadsWeekly Downloads

    168,351

    Version

    0.17.0

    License

    MIT

    Unpacked Size

    46.6 kB

    Total Files

    10

    Last publish

    Collaborators

    • ryanflorence
    • mjackson
    • chancestrickland
    • blainekasten