Skip to content

Alert

Screenreader 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 screenreader on you won't notice a difference between rendering <Alert> vs. a <div>.

<Component initialState={{ messages: [] }}>
  {({ setState, state }) => (
    <div>
      <button
        onClick={() => {
          setState(
            state => ({
              messages: state.messages.concat([
                `Message #${state.messages.length + 1}`
              ])
            }),
            () => {
              setTimeout(() => {
                setState(state => ({
                  messages: state.messages.slice(1)
                }));
              }, 5000);
            }
          );
        }}
      >
        Add a message
      </button>
      <div>
        {state.messages.map((message, index) => (
          <Alert key={index}>{message}</Alert>
        ))}
      </div>
    </div>
  )}
</Component>

Installation

npm install @reach/alert
# or
yarn add @reach/alert

And then import the components you need:

import Alert from "@reach/alert"

Alert Props

PropType
element propsspread
typeenum "assertive" or "polite"
childrennode

element props

Type: spread

Any props not listed above will be spread onto the underlying div element.

<Alert style={{
  background: "hsla(10, 50%, 50%, .10)",
  padding: "10px"
}}>
  ❗️ Woah! Something went wrong.
</Alert>
❗️ Woah! Something went wrong.

type

Type: enum "assertive" | "polite" default: "polite"

Controls whether the assistive technology should read immediately ("assertive") or wait until the user is idle ("polite").

<Alert type="polite">
  This is the default
</Alert>

<Dialog type="assertive">
  If a screenreader is currently reading something and
  you render this, it will interrupt the user and read
  this immediately.
</Dialog>

You should probably stick with polite most of the time.

children

Type: node

Regular React children.

<Alert>
  <p>Whatever you want here</p>
  <p>Is fine.</p>
</Alert>

Whatever you want here

Is fine.