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

/@reach/dialog/

    Package Sidebar

    Install

    npm i @reach/dialog

    Weekly Downloads

    205,778

    Version

    0.18.0

    License

    MIT

    Unpacked Size

    53.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • ryanflorence
    • mjackson
    • chancestrickland
    • blainekasten