react-compact-toast/dist/index.d.ts

A tiny, compact, and fully customizable toast notification library.

import * as react_jsx_runtime from 'react/jsx-runtime';
import * as react from 'react';

type ToastPosition = 'bottomCenter' | 'bottomLeft' | 'bottomRight' | 'topCenter' | 'topLeft' | 'topRight';
type ToastProps = {
    toastId: string;
    text: string;
    autoClose?: false | number;
    closeOnClick?: boolean;
    position?: ToastPosition;
    icon?: React.JSX.Element | string | 'default';
    className?: string;
    highlightText?: string;
    highlightColor?: string;
};
declare const enum ToastEvent {
    Add = 0,
    Delete = 1,
    Update = 2
}
type EventCallbacks = {
    [ToastEvent.Add]: (props: ToastProps) => void;
    [ToastEvent.Delete]: (id: string) => void;
    [ToastEvent.Update]: (id: string, text: string) => void;
};
type TimeoutId = ReturnType<typeof setTimeout>;
interface EventManager {
    list: Map<ToastEvent, EventCallbacks[keyof EventCallbacks][]>;
    emitQueue: Map<ToastEvent, TimeoutId[]>;
    activeToastCount: number;
    on<E extends ToastEvent>(event: E, callback: EventCallbacks[E]): EventManager;
    off<E extends ToastEvent>(event: E, callback?: EventCallbacks[E]): EventManager;
    cancelEmit(event: ToastEvent): EventManager;
    emit<E extends ToastEvent>(event: E, ...args: Parameters<EventCallbacks[E]>): void;
}

declare const eventManager: EventManager;

type ToastOptions = Omit<ToastProps, 'toastId'>;
/**
 * Creates and displays a toast notification.
 *
 * @param {ToastOptions | string} options - Toast configuration options or a simple text message
 *   - If a string is provided, it will be converted to `{ text: options }`
 *   - If an object is provided, it should contain toast configuration properties:
 * @param {string} options.text - The text content to display in the toast
 * @param {React.JSX.Element | string | 'default'} [options.icon] - Icon to display in the toast:
 *   - JSX Element: Custom React component
 *   - string: Text/emoji icon
 *   - 'default': Default icon
 *   - undefined: No icon
 * @param {string} [options.highlightText] - Text to highlight with a different color
 * @param {string} [options.highlightColor] - Custom color for the highlighted text (CSS color value)
 * @param {false | number} [options.autoClose=3000] - Auto-close behavior:
 *   - `false`: Toast will not close automatically
 *   - `number`: Time in milliseconds before the toast closes automatically
 * @param {boolean} [options.closeOnClick=true] - Whether the toast should close when clicked
 * @param {ToastPosition} [options.position='bottomCenter'] - Position where the toast appears:
 *   - 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight'
 * @param {string} [options.className] - Custom CSS classes to apply to the toast
 * @returns {string} The unique ID of the created toast
 *
 * @example
 * // Simple text toast
 * toast('Hello, world!');
 *
 * @example
 * // Toast with custom options
 * toast({
 *   text: 'Custom notification',
 *   icon: '🚀',
 *   highlightText: 'Custom',
 *   highlightColor: '#ff6b6b',
 *   autoClose: 5000,
 *   closeOnClick: true,
 *   position: 'topRight',
 *   className: 'bg-blue-500 text-white rounded-lg',
 * });
 */
declare const toast: (options: ToastOptions | string) => string;

declare const Toast: ({ toastId, text, icon, highlightText, highlightColor, autoClose, closeOnClick, position, className, }: ToastProps) => react_jsx_runtime.JSX.Element;

declare const _default: react.MemoExoticComponent<() => react_jsx_runtime.JSX.Element>;

declare const useToast: (toastId: string, autoClose?: number | false, closeOnClick?: boolean) => {
    isExiting: boolean;
    handleAnimationEnd: () => void;
    handleClick: () => void;
};

declare const useToastContainer: () => {
    getToastPositionGroupToRender: () => Map<ToastPosition, ToastProps[]>;
};

export { type EventCallbacks, type EventManager, type TimeoutId, Toast, _default as ToastContainer, ToastEvent, type ToastPosition, type ToastProps, eventManager, toast, useToast, useToastContainer };