0.19.0 • Published 1 year ago
reach-dialog-react-18 v0.19.0
@reach/dialog
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>
);
}
0.19.0
1 year ago