How to use @react-md/alert - 8 common examples
To help you get started, we’ve selected a few @react-md/alert examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
mlaursen / react-md / packages / documentation / src / components / Demos / Alert / HandlingDuplicatedMessages.tsx View on Github 
const HandlingDuplicatedMessages: FC = ({
duplicates,
onDuplicateChange,
}) => {
const addMessage = useAddMessage();
const [key, handleKeyChange] = useChoice(ONLINE);
return (
<form> addMessage(MESSAGES[key])}>
<fieldset>
<code>MessageQueue</code>
{" duplicate behavior"}
}
>
</fieldset></form>const SimpleMessageQueue: FC = () => {
const addMessage = useAddMessage();
const [key, handleKeyChange] = useChoice(SINGLE_LINE);
return (
<form> addMessage(messages[key])}>
</form>const SimpleMessageQueue: FC = () => {
const addMessage = useAddMessage();
const [key, handleKeyChange] = useChoice(SINGLE_LINE);
return (
<form> addMessage(messages[key])}>
</form>const UpdatingMessagePriority: FC = () => {
const addMessage = useAddMessage();
const [priority, handlePriorityChange] = useChoice("next");
const queue = useQueue();
const [running, setRunning] = useState(false);
if (running && !queue.length) {
setRunning(false);
}
const exampleNextFlow = useCallback(() => {
addMessage({
messageId: "message-1",
children: "First normal message",
messagePriority: "normal",
});
addMessage({
messageId: "message-2",const HandlingDuplicatedMessages: FC = ({
duplicates,
onDuplicateChange,
}) => {
const addMessage = useAddMessage();
const [key, handleKeyChange] = useChoice(ONLINE);
return (
<form> addMessage(MESSAGES[key])}>
<fieldset>
<code>MessageQueue</code>
{" duplicate behavior"}
}
disableLegendSROnly
>
</fieldset></form>const UpdatingMessagePriority: FC = () => {
const addMessage = useAddMessage();
const [priority, handlePriorityChange] = useChoice("next");
const queue = useQueue();
const [running, setRunning] = useState(false);
if (running && !queue.length) {
setRunning(false);
}
const exampleNextFlow = useCallback(() => {
addMessage({
messageId: "message-1",
children: "First normal message",
messagePriority: "normal",
});
addMessage({
messageId: "message-2",const UpdatingMessagePriority: FC = () => {
const addMessage = useAddMessage();
const [priority, handlePriorityChange] = useChoice("next");
const queue = useQueue();
const [running, setRunning] = useState(false);
if (running && !queue.length) {
setRunning(false);
}
const exampleNextFlow = useCallback(() => {
addMessage({
messageId: "message-1",
children: "First normal message",
messagePriority: "normal",
});
addMessage({
messageId: "message-2",
children: "Second normal message",
messagePriority: "normal",const UpdatingMessagePriority: FC = () => {
const addMessage = useAddMessage();
const [priority, handlePriorityChange] = useChoice("next");
const queue = useQueue();
const [running, setRunning] = useState(false);
if (running && !queue.length) {
setRunning(false);
}
const exampleNextFlow = useCallback(() => {
addMessage({
messageId: "message-1",
children: "First normal message",
messagePriority: "normal",
});
addMessage({
messageId: "message-2",
children: "Second normal message",
messagePriority: "normal",@react-md/alert
Create accessible alerts through snackbars and banners.
