Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

@reach/dialog

0.8.4 • 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

41,305

Version

0.8.4

License

MIT

Unpacked Size

80.5 kB

Total Files

12

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar