#Usage

#Basic example

Click the button to fire a toast. Click again to stack another. The "Close all" button dismisses everything.

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

function MyComponent() {
  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
  return (
    <>
      <button onClick={() => enqueueSnackbar('Saved')}>Show toast</button>
      <button onClick={() => closeSnackbar()}>Close all</button>
    </>
  );
}

#Provider configuration

<SnackbarProvider> accepts these props:

<SnackbarProvider
  maxSnack={5}
  anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
  autoHideDuration={4000}
  prefetch='idle'
>
  <App />
</SnackbarProvider>

#Per-call options

Every enqueueSnackbar call can override the provider defaults:

enqueueSnackbar('Saved', {
  variant: 'success',
  autoHideDuration: 8000,
  anchorOrigin: { vertical: 'top', horizontal: 'right' },
  persist: false,
  disableWindowBlurListener: true,
  key: 'save-toast',
  onClose: (_event, reason, key) => console.log('Closed', key, reason),
});

The full options shape lives in the API reference.

#Hover behavior

Hovering anywhere on the stack pauses the auto-dismiss timer and expands the stack so the background toasts are visible. The timer resumes when you move away.

#Drag to dismiss

The front toast in a stack can be swiped in the direction of the nearest screen edge to dismiss it. The dismiss direction is computed from the toast's anchorOrigin:

Drags below the threshold (100 px, or velocity > 0.4 px/ms) snap back. Drags in disallowed directions rubber-band with logarithmic damping.

#Imperative close

closeSnackbar(key) dismisses a specific notification. closeSnackbar() (no argument) dismisses every notification across every anchor stack.

const key = enqueueSnackbar('Uploading...', { persist: true });
// later
closeSnackbar(key);