Screen-reader-friendly alert messages.

Usage no npm install needed!

<script type="module">
  import reachAlert from 'https://cdn.skypack.dev/@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 (
        onClick={() => {
          setMessages((prevMessages) =>
            prevMessages.concat([`Message #${prevMessages.length + 1}`])
          setTimeout(() => {
            setMessages((prevMessages) => prevMessages.slice(1));
          }, 5000);
        Add a message
        {messages.map((message, index) => (
          <Alert key={index}>{message}</Alert>