@reach/alert
TypeScript icon, indicating that this package has built-in type declarations

0.18.0 • Public • Published

@reach/alert

Stable release MIT license

Docs | Source | WAI-ARIA

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>.

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

Readme

Keywords

none

Package Sidebar

Install

npm i @reach/alert

Weekly Downloads

98,284

Version

0.18.0

License

MIT

Unpacked Size

27.9 kB

Total Files

10

Last publish

Collaborators

  • ryanflorence
  • mjackson
  • chancestrickland
  • blainekasten