Create accessible alerts through snackbars and banners.
npm install @react-md/alertCreate 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.
``sh`
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:
`sh`
npm install --save @react-md/theme \
@react-md/typography \
@react-md/button
You should check out the
full documentation for live
examples and more customization information, but an example usage is shown
below.
src/index.tsx
`tsx
import { render } from "react-dom";
import { MessageQueue } from "@react-md/alert";
import App from "./App";
render(
document.getElementById("root")
);
`
src/App.tsx
`tsx
import type { ReactElement } from "react";
import { useAddMessage } from "@react-md/alert";
import { Button } from "@react-md/button";
function App(): ReactElement {
const addMessage = useAddMessage();
return (
id="button-1"
onClick={() => addMessage({ children: "Example Message" })}
>
Show Message
);
}
export default App;
``