Skip to main content
Alert - Installation
Toggle Light/Dark ThemeView GitHubToggle right to left

# @react-md/alert

Create accessible alerts.

# Installation

$ npm install --save @react-md/alert

It is generally recommended to also install the following packages since they work hand-in-hand with this package:

$ npm install --save @react-md/theme \
    @react-md/typography \
    @react-md/button

# Usage

src/index.tsx

123456789101112import React from "react";
import { render } from "react-dom";
import { MessageQueue } from "@react-md/alert";

import App from "./App";

render(
  <MessageQueue id="main-alerts">
    <App />
  </MessageQueue>,
  document.getElementById("root")
);

src/App.tsx

123456789101112131415161718import React, { FC } from "react";
import { useAddMessage } from "@react-md/alert";
import { Button } from "@react-md/button";

const App: FC = () => {
  const addMessage = useAddMessage();

  return (
    <Button
      id="button-1"
      onClick={() => addMessage({ children: "Example Message" })}
    >
      Show Message
    </Button>
  );
};

export default App;

# Typescript Types

All the useful types are exported from the root for convenience. The following types might help self-describe how messages work:

  • Message
  • ToastMessage