# @reach/alert

> Screen-reader-friendly alert messages.

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

## Install

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

## 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-09-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 27.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5967 |
| Author | React Training |
| Maintainers | ryanflorence, mjackson, chancestrickland, blainekasten |

## Links

- npm: https://www.npmjs.com/package/@reach/alert
- 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/alert

## Dependencies (3)

- [@reach/utils](https://npm.io/package/@reach/utils.md) 0.18.0
- [@reach/polymorphic](https://npm.io/package/@reach/polymorphic.md) 0.18.0
- [@reach/visually-hidden](https://npm.io/package/@reach/visually-hidden.md) 0.18.0

## 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.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
- 0.13.2 — 2021-02-21
- … 41 more at https://npm.io/package/@reach/alert/versions

## README

# @reach/alert

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

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

Screen-reader-friendly alert messages. In many apps developers add "alert" messages when network events or other things happen. Users with assistive technologies may not know about the message unless you develop for it.

The Alert component will announce to assistive technologies whatever you render to the screen. If you don't have a screen reader on you won't notice a difference between rendering `<Alert>` vs. a `<div>`.

```jsx
function Example(props) {
	const [messages, setMessages] = React.useState([]);
	return (
		<div>
			<button
				onClick={() => {
					setMessages((prevMessages) =>
						prevMessages.concat([`Message #${prevMessages.length + 1}`])
					);
					setTimeout(() => {
						setMessages((prevMessages) => prevMessages.slice(1));
					}, 5000);
				}}
			>
				Add a message
			</button>
			<div>
				{messages.map((message, index) => (
					<Alert key={index}>{message}</Alert>
				))}
			</div>
		</div>
	);
}
```

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