Neoclassical Programming Multitude

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

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

    Keywords

    none

    Install

    npm i @reach/alert

    DownloadsWeekly Downloads

    234,908

    Version

    0.16.0

    License

    MIT

    Unpacked Size

    23.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • ryanflorence
    • mjackson
    • chancestrickland
    • blainekasten