kitzo

React utilities library

npm GitHub

Toaster

A flexible toast notification system for React applications

Global Configuration

Position

Gap: 8px

Edge offset: 16px

Rich colors

Pause on hover

Swipe to close

Dark mode

Animate transform origin

Preview

App.tsx

import { Toaster } from 'kitzo';

export default function App() {
  return (
    <div>
      <span>App</span>

      <Toaster 
        position="top-center"
        richColors={false}
        pauseOnHover={true}
        swipeToClose={true}
        isDark={false}
        gap={8}
        animateTransformOrigin={true}
      />
    </div>
  )
}

Usage Examples

Basic Toast

Display a simple notification message.

Toast Positions

Display toasts in different screen positions.

Loading Toast

Display a loading state for ongoing operations.

Promise Toast

Handle async operations with automatic state transitions.

Custom Toast

Create fully customized toast content.

Dismiss Toast

Programmatically dismiss toasts.

Update Toast

Update existing toast content and options.

Toaster Props Reference

Props	Type	Default	Description
`toasterId`	`string \| number`	`default`	Unique identifier for the toaster instance. Allows multiple independent toast systems on the same page.
`position`	`string`	`top-center`	Controls where the toast stack appears on the screen.
`gap`	`number`	`8`	Spacing in pixels between stacked toasts.
`edgeOffset`	`number`	`16`	Distance in pixels from the screen edge to the toast container.
`richColors`	`boolean`	`false`	Enables semantic colors for success, error, warning, and info toasts.
`pauseOnHover`	`boolean`	`true`	Pauses the toast timer while hovering or touching the toast.
`swipeToClose`	`boolean`	`true`	Allows dismissing the toast by swiping it away.
`isDark`	`boolean`	`false`	Forces dark mode styling regardless of system theme.
`animateTransformOrigin`	`boolean`	`true`	Animates toasts from their positional origin for a more natural entrance.

toast Method Reference

Methods	Params	Purpose
`toast()`	`content \| (dismiss) => contentoptions?`	Default toast
`toast.info()`	`content \| (dismiss) => contentoptions?`	Info message
`toast.success()`	`content \| (dismiss) => contentoptions?`	Success message
`toast.warning()`	`content \| (dismiss) => contentoptions?`	Warning message
`toast.error()`	`content \| (dismiss) => contentoptions?`	Error message
`toast.loading()`	`content \| (dismiss) => contentoptions?`	Loading state
`toast.promise()`	`promisemsgsoptions?`	Async lifecycle
`toast.custom()`	`content \| (dismiss) => contentoptions?`	Custom UI
`toast.update()`	`idcontent \| (dismiss) => contentoptions?`	Update toast
`toast.dismiss()`	`id?`	Dismiss toast(s)

toast Options Reference

Name	Type	Description
`position`	`Positions`	Controls where the toast appears on the screen.
`id`	`string \| number`	Unique identifier used to control a specific toast instance.
`toasterId`	`string \| number`	Specifies which toaster instance should display this toast. Useful when multiple <Toaster /> components are mounted.
`duration`	`number`	Time in milliseconds before the toast automatically closes.
`type`	`ToastType`	Defines the visual variant of the toast.
`showIcon`	`boolean`	Toggles the default icon based on toast type.
`icon`	`ReactNode`	Replaces the default icon with a custom one.
`animateTransformOrigin`	`boolean`	Animates the toast from its positional origin.
`swipeToClose`	`boolean`	Allows the toast to be dismissed using a swipe gesture.

Variant Notes

Variant helpers like toast.info(), toast.success(), toast.warning(), toast.error(), toast.loading() and toast.custom() do not accept a type option. The toast variant is inferred directly from the method used.
toast.update() requires an id as its first argument. Passing id inside the options object is not supported.
toast.promise() manages the toast lifecycle internally. As a result, it does not accept id or type options. The swipeToClose option becomes active only after the promise is resolved.