@reach/dialog | Npm Package Usage Trend

@reach/dialog

Accessible React Modal Dialog.

🌟 @reach/dialogのREADME.mdにリアルタイム使用チャートを表示するには、以下のコードをコピーしてください。

## Usage Trend
[![Usage Trend of @reach/dialog](https://npm-compare.com/img/npm-trend/THREE_YEARS/@reach/dialog.png)](https://npm-compare.com/@reach/dialog#timeRange=THREE_YEARS)

🌟 @reach/dialogのREADME.mdにGitHub Starsトレンドチャートを表示するには、以下のコードをコピーしてください。

## GitHub Stars Trend
[![GitHub Stars Trend of @reach/dialog](https://npm-compare.com/img/github-trend/@reach/dialog.png)](https://npm-compare.com/@reach/dialog)

パッケージ	ダウンロード数	Stars	サイズ	Issues	公開日時	ライセンス

@reach/dialog	157,154	6,005	53.3 kB	99	-	MIT

@reach/dialog

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