# @reach/dialog

> Accessible React Modal Dialog.

Latest version **0.18.0** (published 2022-10-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @reach/dialog
pnpm add @reach/dialog
yarn add @reach/dialog
bun add @reach/dialog
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.18.0 |
| Published | 2022-10-13 |
| First published | 2018-08-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 52.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5968 |
| Author | React Training |
| Maintainers | ryanflorence, mjackson, chancestrickland, blainekasten |

## Links

- npm: https://www.npmjs.com/package/@reach/dialog
- Repository: https://github.com/reach/reach-ui
- Homepage: https://github.com/reach/reach-ui#readme
- Issues: https://github.com/reach/reach-ui/issues
- npm.io page: https://npm.io/package/@reach/dialog

## Dependencies (5)

- [@reach/utils](https://npm.io/package/@reach/utils.md) 0.18.0
- [@reach/portal](https://npm.io/package/@reach/portal.md) 0.18.0
- [react-focus-lock](https://npm.io/package/react-focus-lock.md) 2.5.2
- [@reach/polymorphic](https://npm.io/package/@reach/polymorphic.md) 0.18.0
- [react-remove-scroll](https://npm.io/package/react-remove-scroll.md) 2.4.3

## Recent versions

- 0.18.0 (latest) — 2022-10-13
- 0.18.0-pre.5 (pre) — 2022-10-12
- 0.4.0-beta.0 (next) — 2019-10-12
- 0.18.0-pre.4 — 2022-10-12
- 0.18.0-pre.3 — 2022-10-11
- 0.18.0-pre.2 — 2022-10-11
- 0.18.0-pre.1 — 2022-10-11
- 0.18.0-pre.0 — 2022-10-11
- 0.17.0 — 2022-04-20
- 0.16.2 — 2021-10-17
- 0.16.0 — 2021-08-02
- 0.15.3 — 2021-07-10
- 0.15.2 — 2021-06-28
- 0.15.0 — 2021-04-07
- 0.14.0 — 2021-03-28
- … 52 more at https://npm.io/package/@reach/dialog/versions

## README

# @reach/dialog

[![Stable release](https://img.shields.io/npm/v/@reach/dialog.svg)](https://npm.im/@reach/dialog) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/dialog) | [Source](https://github.com/reach/reach-ui/tree/main/packages/dialog) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal)

An accessible dialog or modal window.

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

---
_Source: https://npm.io/package/@reach/dialog · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._