Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@react-md/alert

2.1.0 • Public • Published

@react-md/alert

Create accessible alerts that can be displayed to users in your app. This package provides a MessageQueue for showing messages and a useAddMessage hook to push alerts into the queue.

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

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

src/index.tsx

import 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

import 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;

Install

npm i @react-md/alert

DownloadsWeekly Downloads

194

Version

2.1.0

License

MIT

Unpacked Size

202 kB

Total Files

78

Last publish

Collaborators

  • avatar