useAlert

The useAlert hook allows you to create accessible alert components that behave consistent across devices and browsers. The hook provides your component with proper ARIA accessibility props for the alert and an optional close button.

Features

• Cross browser support and normalization.
• Full ARIA accessibility support.
• Out-of-the-box internationalization for ARIA labels.

Anatomy

An alert displays a short but important message, without interrupting the user's task. Usually it includes a text-based label as well as an icon to describe the action in more detail.

When the alert is displayed on the screen, it will automatically be announced by most screen readers.

Actions within the alert, such as the close button, must have a tabIndex of 0 so that they can be reached by keyboard-only users.

Example

function Example() {
  const {alertProps, closeButtonProps} = useAlert();

  const handleClose = () => {
    window.alert('The alert was closed.');
  };

  return (
    <div {...alertProps}>
      <span>Test Alert</span>

      <button {...closeButtonProps} onClick={handleClose}>
        x
      </button>
    </div>
  );
}

function Example() {
  const {alertProps, closeButtonProps} = useAlert();

  const handleClose = () => {
    window.alert('The alert was closed.');
  };

  return (
    <div {...alertProps}>
      <span>Test Alert</span>

      <button {...closeButtonProps} onClick={handleClose}>
        x
      </button>
    </div>
  );
}

function Example() {
  const {
    alertProps,
    closeButtonProps
  } = useAlert();

  const handleClose =
    () => {
      window.alert(
        'The alert was closed.'
      );
    };

  return (
    <div {...alertProps}>
      <span>
        Test Alert
      </span>

      <button
        {...closeButtonProps}
        onClick={handleClose}
      >
        x
      </button>
    </div>
  );
}