React Toast Component

Installation

pnpm add krz-ui

Usage

import { ToastProvider, useToast } from "krz-ui";

// Wrap your app once
<ToastProvider position="bottom-right">
  <App />
</ToastProvider>

// Then anywhere inside it
const { toast, success, error } = useToast();
success("Saved", "Your changes are live.");

API Reference

Prop	Type	Description
`position`	`"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"`	ToastProvider: where toasts appear.
`max`	`number`	ToastProvider: maximum toasts visible at once. Defaults to 5.
`toast(options)`	`ToastOptions \| string`	useToast: show a toast with title, description, variant, duration and action.
`success / error`	`(title, description?) => number`	useToast: shortcuts for common variants.
`dismiss`	`(id?: number) => void`	useToast: close one toast, or all.
`className / style / ref`	`—`	On ToastProvider, className and style style the toast container. Pass toast({ className }) to style one toast. See Customization.
`classNames`	`{ toast?, icon?, content?, title?, description?, action?, close?, timer? }`	Extra classes for inner parts.