react-toast-kit
Version:
A modern, accessible toast notification system for React applications with automatic CSS injection
156 lines (153 loc) • 5.97 kB
TypeScript
import * as zustand from 'zustand';
import { JSX } from 'react';
type ToastPosition = 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left';
type ToastVariant = 'success' | 'error' | 'info' | 'warning' | 'default' | 'custom' | 'loading';
type ToastTheme = 'light' | 'dark' | 'system';
type ToastAnimation = 'slide' | 'fade' | 'bounce' | 'flip' | 'zoom' | 'none';
type ToastStyle = 'solid' | 'gradient' | 'glass' | 'shimmer' | 'pill' | 'neon' | 'retro' | 'confetti';
type ProgressBarStyle = 'default' | 'fancy' | 'gradient-wave' | 'pulse' | 'particles' | 'liquid' | 'three-d' | 'dashed' | 'glow' | 'rainbow' | 'data-flow' | 'step-progress';
interface CustomAnimation {
initial: Record<string, unknown>;
animate: Record<string, unknown>;
exit: Record<string, unknown>;
transition?: Record<string, unknown>;
}
interface ToastPlugin {
name: string;
description?: string;
beforeCreate?: (options: ToastOptions) => ToastOptions;
afterCreate?: (toast: Toast) => void;
beforeRemove?: (toast: Toast) => boolean;
afterRemove?: (toast: Toast) => void;
}
interface ToastOptions {
id?: string;
title?: string;
description?: string;
variant?: ToastVariant;
duration?: number;
position?: ToastPosition;
dismissible?: boolean;
pauseOnHover?: boolean;
dismissOnClick?: boolean;
theme?: ToastTheme;
icon?: JSX.Element;
component?: JSX.Element;
onDismiss?: (id: string) => void;
className?: string;
style?: React.CSSProperties;
animation?: ToastAnimation;
customAnimation?: CustomAnimation;
visualStyle?: ToastStyle;
progressBarStyle?: ProgressBarStyle;
progressBarColor?: string;
progressBarPosition?: 'top' | 'bottom' | 'left' | 'right';
progressBarThickness?: number;
floating?: boolean;
emoji?: string;
rippleEffect?: boolean;
stagger?: number;
swipeToDismiss?: boolean;
priority?: 'low' | 'normal' | 'high';
progressAnimation?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
}
interface StrictToastOptions extends Omit<ToastOptions, 'variant' | 'position'> {
variant: ToastVariant;
position: ToastPosition;
}
interface Toast extends Required<Pick<ToastOptions, 'id' | 'variant' | 'position' | 'duration' | 'pauseOnHover' | 'dismissible' | 'dismissOnClick' | 'theme'>> {
title?: string;
description?: string;
icon?: JSX.Element;
component?: JSX.Element;
createdAt: number;
onDismiss?: (id: string) => void;
className?: string;
style?: React.CSSProperties;
animation?: ToastAnimation;
customAnimation?: CustomAnimation;
visualStyle?: ToastStyle;
progressBarStyle?: ProgressBarStyle;
progressBarColor?: string;
progressBarPosition?: 'top' | 'bottom' | 'left' | 'right';
progressBarThickness?: number;
floating?: boolean;
emoji?: string;
rippleEffect?: boolean;
stagger?: number;
swipeToDismiss?: boolean;
priority?: 'low' | 'normal' | 'high';
progressAnimation?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
iconString?: string;
updating?: boolean;
timerId?: number;
}
interface ToastState {
toasts: Toast[];
maxToasts: number;
theme: ToastTheme;
effectiveTheme: 'light' | 'dark';
pausedToasts: Set<string>;
activeTimers: Map<string, number>;
plugins: ToastPlugin[];
addToast: (toast: Toast) => string;
removeToast: (id: string) => void;
updateToast: (id: string, toast: Partial<Toast>) => void;
pauseToast: (id: string) => void;
resumeToast: (id: string) => void;
clearAllToasts: () => void;
setTheme: (theme: ToastTheme) => void;
setMaxToasts: (max: number) => void;
updateEffectiveTheme: () => void;
cleanup: () => void;
registerPlugin: (plugin: ToastPlugin) => void;
unregisterPlugin: (name: string) => void;
}
declare const useToastStore: zustand.UseBoundStore<zustand.StoreApi<ToastState>>;
type ToastHandler = {
(message: string): string;
(options: ToastOptions): string;
success: (options: ToastOptions | string) => string;
error: (options: ToastOptions | string) => string;
warning: (options: ToastOptions | string) => string;
info: (options: ToastOptions | string) => string;
loading: (options: ToastOptions | string) => string;
custom: (component: JSX.Element, options?: Omit<ToastOptions, 'component'>) => string;
promise: <T>(promise: Promise<T>, options: {
loading: ToastOptions | string;
success: ((data: T) => ToastOptions | string) | ToastOptions | string;
error: ((error: unknown) => ToastOptions | string) | ToastOptions | string;
}) => Promise<T>;
update: (id: string, options: Partial<ToastOptions>) => void;
dismiss: (id?: string) => void;
clearAll: () => void;
};
declare const toast: ToastHandler;
declare const registerPlugin: (plugin: ToastPlugin) => void;
declare const unregisterPlugin: (name: string) => void;
declare const cleanup: () => void;
declare const toastDevTools: {
getActiveToasts: () => Toast[];
clearAll: () => void;
debugInfo: () => void;
getStore: () => ToastState;
simulateError: () => void;
simulateSuccess: () => void;
/**
* Show the DevTools panel
*/
show: () => void;
/**
* Hide the DevTools panel
*/
hide: () => void;
/**
* Toggle the DevTools panel visibility
*/
toggle: () => void;
/**
* Get all active toasts
*/
getToasts: () => Toast[];
};
export { type CustomAnimation as C, type ProgressBarStyle as P, type StrictToastOptions as S, type ToastTheme as T, type ToastPosition as a, type ToastAnimation as b, type ToastStyle as c, type Toast as d, type ToastPlugin as e, toast as f, unregisterPlugin as g, cleanup as h, type ToastOptions as i, type ToastVariant as j, registerPlugin as r, toastDevTools as t, useToastStore as u };