@monetr/notify

    Action buttons

    Pass an action to render a clickable button to the right of the message. Clicking the action button fires onClose with reason: 'instructed' and dismisses the toast.

    Dismissed: 0
    import { useSnackbar } from '@monetr/notify';

function Example() {
  const { enqueueSnackbar } = useSnackbar();
  return (
    <button
      onClick={() =>
        enqueueSnackbar('Item deleted', {
          variant: 'success',
          persist: true,
          action: <span>Undo</span>,
          onClose: (_event, reason, key) => {
            if (reason === 'instructed') {
              console.log('Undo clicked or × clicked', key);
            }
          },
        })
      }
    >
      Delete
    </button>
  );
}

    Render-function action

    action can also be a function that receives the snackbar's key. Useful when you need to imperatively close the toast or look up state by key.

    import { useSnackbar } from '@monetr/notify';

function Example() {
  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
  return (
    <button
      onClick={() =>
        enqueueSnackbar('Uploaded', {
          persist: true,
          action: key => (
            <button onClick={() => closeSnackbar(key)} type='button'>
              Got it
            </button>
          ),
        })
      }
    >
      Upload
    </button>
  );
}

    Close reasons

    onClose receives the close reason as its second argument:

    ReasonWhen fired
    'timeout'autoHideDuration elapsed
    'instructed'× button, action button, or closeSnackbar(key)
    'swipe'User dragged the toast past the dismiss threshold
    'maxsnack'A new toast pushed this one out of the visible stack
    'clickaway'Reserved; not currently fired by this package