@bgunnarsson/toaster for React.

Options

For options refer to the options section in the main readme file.

Usage

Import the hook.

import { useToaster } from '@bgunnarssom/toaster/react';

Initialize the toaster with options

const { toast, dismiss } = useToaster({
  position: 'bottom right',
  offset: { x: 20, y: 20 },
  customClass: 'my-toaster',
})

Regular toast

<button onClick={() => toast({ content: 'This is a text toast!' })}>
  Show Toast
</button>

HTML Toast

<button onClick={() => toast({
  content: '<h1>This is a rich HTML toast!</h1>',
  persist: true,
})}>
  Show Persistent Toast
</button>

Manually dismiss a persisted toast

<button onClick={() => dismiss()}>
  Dismiss Toast
</button>