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

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

Readme

Keywords

none

Package Sidebar

Install

npm i @reach/dialog

Weekly Downloads

215,349

Version

0.18.0

License

MIT

Unpacked Size

53.3 kB

Total Files

11

Last publish

Collaborators

  • ryanflorence
  • mjackson
  • chancestrickland
  • blainekasten