How to use the @react-md/alert.useAddMessage function in @react-md/alert

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.

github mlaursen / react-md / packages / documentation / src / components / Demos / Alert / HandlingDuplicatedMessages.tsx View on Github external
const HandlingDuplicatedMessages: FC = ({
  duplicates,
  onDuplicateChange,
}) => {
  const addMessage = useAddMessage();
  const [key, handleKeyChange] = useChoice(ONLINE);
  return (
    <form> addMessage(MESSAGES[key])}&gt;
      <fieldset>
            <code>MessageQueue</code>
            {" duplicate behavior"}
          
        }
      &gt;
        </fieldset></form>
github mlaursen / react-md / packages / documentation / components / Demos / Alert / SimpleMessageQueue.tsx View on Github external
const SimpleMessageQueue: FC = () =&gt; {
  const addMessage = useAddMessage();
  const [key, handleKeyChange] = useChoice(SINGLE_LINE);

  return (
    <form> addMessage(messages[key])}&gt;
      
      </form>
github mlaursen / react-md / packages / documentation / src / components / Demos / Alert / SimpleMessageQueue.tsx View on Github external
const SimpleMessageQueue: FC = () =&gt; {
  const addMessage = useAddMessage();
  const [key, handleKeyChange] = useChoice(SINGLE_LINE);

  return (
    <form> addMessage(messages[key])}&gt;
      
      </form>
github mlaursen / react-md / packages / documentation / components / Demos / Alert / UpdatingMessagePriority.tsx View on Github external
const UpdatingMessagePriority: FC = () =&gt; {
  const addMessage = useAddMessage();
  const [priority, handlePriorityChange] = useChoice("next");
  const queue = useQueue();
  const [running, setRunning] = useState(false);

  if (running &amp;&amp; !queue.length) {
    setRunning(false);
  }

  const exampleNextFlow = useCallback(() =&gt; {
    addMessage({
      messageId: "message-1",
      children: "First normal message",
      messagePriority: "normal",
    });
    addMessage({
      messageId: "message-2",
github mlaursen / react-md / packages / documentation / components / Demos / Alert / HandlingDuplicatedMessages.tsx View on Github external
const HandlingDuplicatedMessages: FC = ({
  duplicates,
  onDuplicateChange,
}) =&gt; {
  const addMessage = useAddMessage();
  const [key, handleKeyChange] = useChoice(ONLINE);
  return (
    <form> addMessage(MESSAGES[key])}&gt;
      <fieldset>
            <code>MessageQueue</code>
            {" duplicate behavior"}
          
        }
        disableLegendSROnly
      &gt;
        </fieldset></form>
github mlaursen / react-md / packages / documentation / src / components / Demos / Alert / UpdatingMessagePriority.tsx View on Github external
const UpdatingMessagePriority: FC = () =&gt; {
  const addMessage = useAddMessage();
  const [priority, handlePriorityChange] = useChoice("next");
  const queue = useQueue();
  const [running, setRunning] = useState(false);

  if (running &amp;&amp; !queue.length) {
    setRunning(false);
  }

  const exampleNextFlow = useCallback(() =&gt; {
    addMessage({
      messageId: "message-1",
      children: "First normal message",
      messagePriority: "normal",
    });
    addMessage({
      messageId: "message-2",

@react-md/alert

Create accessible alerts through snackbars and banners.

MIT
Latest version published 1 year ago

Package Health Score

60 / 100
Full package analysis