Toastr

Toast notification system with queue management.

Also known as: toast, snackbar, flash message, notification popup

View in Storybook

When to use

• Brief feedback messages (success, error, warning). Shows multiple toasts simultaneously at bottom-left.
• For top-of-screen single notifications, use Notification. For background save, use SaveProgress.

Import

import { ToastProvider, useToastr } from '@vacano/ui'

Setup

Wrap your app with ToastProvider:

import { ToastProvider } from '@vacano/ui'

function App() {
  return (
    <ToastProvider>
      <YourApp />
    </ToastProvider>
  )
}

Usage

Use the useToastr hook to show notifications:

import { useToastr } from '@vacano/ui'

function MyComponent() {
  const { show } = useToastr()

  return <Button onClick={() => show('Operation completed', 'success')}>Save</Button>
}

Variants

const { show } = useToastr()

// Default
show('Default message')

// Success
show('Successfully saved!', 'success')

// Warning
show('Please review your input', 'warning')

// Danger/Error
show('An error occurred', 'danger')

Custom Duration

// Default duration (auto-dismiss)
show('Quick message', 'default')

// Longer duration (in milliseconds)
show('Important message', 'warning', 10000)

// Very short duration
show('Flash message', 'success', 2000)

Hide Toast Programmatically

const { show, hide } = useToastr()

show('Processing...', 'default')

// Later, hide by toast id
hide(toastId)

Toast Types

type ToastVariant = 'default' | 'success' | 'warning' | 'danger'

type Toast = {
  id: string
  message: string
  variant: ToastVariant
  duration?: number
}

Context Value

type ToastContextValue = {
  show: (
    message: string,
    variant?: ToastVariant,
    duration?: number
  ) => void
  hide: (id: string) => void
}

Related

• Notification - Full-width top notification bar
• SaveProgress - Background save indicator