@reach/alert is a React component library that provides accessible alert messages. It helps developers create alerts that are announced by screen readers, ensuring that users with disabilities are informed of important changes or messages on the page.

What are @reach/alert's main functionalities?

Basic Alert

This feature allows you to create a basic alert message that will be announced by screen readers. The alert is wrapped in the <Alert> component.

import { Alert } from '@reach/alert';

function App() {
  return (
    <div>
      <Alert>This is an important message!</Alert>
    </div>
  );
}

Alert with Type

This feature allows you to specify the type of alert. The 'type' prop can be set to 'assertive' or 'polite', which determines how the screen reader will announce the alert.

import { Alert } from '@reach/alert';

function App() {
  return (
    <div>
      <Alert type="assertive">This is an assertive alert!</Alert>
      <Alert type="polite">This is a polite alert!</Alert>
    </div>
  );
}

Other packages similar to @reach/alert

Readme

Source

@reach/alert

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

FAQs

What is @reach/alert?

Is @reach/alert well maintained?

Last updated on 21 Aug 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install