or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

container.mdindex.mdnotification-center.mdtoast-api.mdtransitions.mdutilities.md
tile.json

tessl/npm-react-toastify

React notification library for adding customizable toast notifications to applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-toastify@11.0.x

To install, run

npx @tessl/cli install tessl/npm-react-toastify@11.0.0

index.mddocs/

React Toastify

React Toastify is a comprehensive React notification library that enables developers to easily add toast notifications to their applications. It provides a highly customizable ToastContainer component and a simple toast API for displaying notifications with various types (success, error, warning, info), positions, animations, and styling options.

Package Information

  • Package Name: react-toastify
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-toastify

Core Imports

import { toast, ToastContainer, Bounce, Slide, Zoom, Flip, Icons } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

For unstyled version (no default CSS):

import { toast, ToastContainer } from 'react-toastify/unstyled';

For CommonJS:

const { toast, ToastContainer, Bounce, Slide, Zoom, Flip, Icons } = require('react-toastify');
require('react-toastify/dist/ReactToastify.css');

Basic Usage

import React from 'react';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  const notify = () => toast("Wow so easy!");

  return (
    <div>
      <button onClick={notify}>Notify!</button>
      <ToastContainer />
    </div>
  );
}

Architecture

React Toastify is built around several key components:

  • Toast API: Main toast function with type-specific methods (success, error, warning, etc.) and control methods
  • ToastContainer: React component that renders and manages toast notifications with extensive configuration options
  • Transition System: Built-in animation components (Bounce, Slide, Zoom, Flip) and custom transition support
  • Event System: Subscribe to toast lifecycle events and manage toast state programmatically
  • Notification Center: Optional addon for persistent notification management
  • Styling System: Styled and unstyled variants with full theming support

Capabilities

Toast API

Core toast notification system with type-specific methods, promise handling, and programmatic control.

function toast(content: ToastContent<T>, options?: ToastOptions<T>): Id;

// Type-specific methods
toast.success(content: ToastContent<T>, options?: ToastOptions<T>): Id;
toast.error(content: ToastContent<T>, options?: ToastOptions<T>): Id;
toast.warning(content: ToastContent<T>, options?: ToastOptions<T>): Id;
toast.info(content: ToastContent<T>, options?: ToastOptions<T>): Id;
toast.loading(content: ToastContent<T>, options?: ToastOptions<T>): Id;

// Control methods
toast.dismiss(id?: Id): void;
toast.update(id: Id, options: UpdateOptions<T>): void;
toast.isActive(id: Id, containerId?: Id): boolean;

// Promise handling
toast.promise<T>(
  promise: Promise<T> | (() => Promise<T>),
  messages: ToastPromiseParams<T>,
  options?: ToastOptions<T>
): Promise<T>;

Toast API

Toast Container

Main React component for rendering and managing toast notifications with extensive configuration options.

interface ToastContainerProps {
  position?: ToastPosition;
  autoClose?: number | false;
  closeOnClick?: boolean;
  pauseOnHover?: boolean;
  draggable?: boolean;
  hideProgressBar?: boolean;
  newestOnTop?: boolean;
  transition?: ToastTransition;
  theme?: Theme;
  // ... many more configuration options
}

function ToastContainer(props: ToastContainerProps): JSX.Element;

Toast Container

Built-in Transitions

Pre-built animation components for smooth toast transitions.

const Bounce: React.FC<ToastTransitionProps>;
const Slide: React.FC<ToastTransitionProps>;
const Zoom: React.FC<ToastTransitionProps>;
const Flip: React.FC<ToastTransitionProps>;

Transitions

Utilities

Helper functions for creating custom transitions and animations.

function cssTransition(config: CSSTransitionProps): React.FC<ToastTransitionProps>;
function collapseToast(node: HTMLElement, done: () => void, duration?: number): void;

Utilities

Icons

Built-in icon components for different toast types and loading states.

const Icons: {
  info: React.FC<IconProps>;
  warning: React.FC<IconProps>;
  success: React.FC<IconProps>;
  error: React.FC<IconProps>;
  spinner: React.FC;
};

interface IconProps {
  theme: Theme;
  type: TypeOptions;
  isLoading?: boolean;
}

Notification Center

Addon for persistent notification management with hooks-based API.

function useNotificationCenter<T>(
  params?: UseNotificationCenterParams<T>
): UseNotificationCenter<T>;

interface UseNotificationCenter<T> {
  notifications: NotificationCenterItem<T>[];
  clear(): void;
  markAllAsRead(read?: boolean): void;
  markAsRead(id: Id | Id[], read?: boolean): void;
  remove(id: Id | Id[]): void;
  add(item: NotificationCenterItem<T>): void;
  update(id: Id, item: Partial<NotificationCenterItem<T>>): void;
  find(id: Id): NotificationCenterItem<T> | undefined;
  sort(compareFn: SortFn<T>): void;
  unreadCount: number;
}

Notification Center

Core Types

type Id = string | number;

type ToastContent<T = unknown> = 
  | React.ReactNode 
  | ((props: ToastContentProps<T>) => React.ReactNode);

type ToastPosition =
  | 'top-left'
  | 'top-right'
  | 'top-center'
  | 'bottom-left'
  | 'bottom-right'
  | 'bottom-center';

type Theme = 'light' | 'dark' | 'colored' | string;

type TypeOptions = 'info' | 'success' | 'warning' | 'error' | 'default';

interface ToastOptions<T = {}> {
  type?: TypeOptions;
  onOpen?: (props: ToastContentProps<T>) => void;
  onClose?: (props: ToastContentProps<T>) => void;
  autoClose?: number | false;
  closeButton?: boolean | ((props: CloseButtonProps) => React.ReactNode);
  position?: ToastPosition;
  transition?: ToastTransition;
  hideProgressBar?: boolean;
  pauseOnHover?: boolean;
  pauseOnFocusLoss?: boolean;
  closeOnClick?: boolean;
  draggable?: boolean;
  draggablePercent?: number;
  draggableDirection?: DraggableDirection;
  role?: string;
  theme?: Theme;
  containerId?: Id;
  toastId?: Id;
  updateId?: Id;
  data?: T;
  isLoading?: boolean;
  icon?: ToastIcon;
  delay?: number;
}

interface ToastContentProps<T = {}> {
  closeToast: CloseToastFunc;
  toastProps: ToastProps;
  isPaused: boolean;
  data: T;
}

interface ToastProps {
  position: ToastPosition;
  autoClose?: number | false;
  closeButton?: boolean | React.ReactElement | ((props: CloseButtonProps) => React.ReactNode);
  hideProgressBar?: boolean;
  closeOnClick?: boolean;
  pauseOnHover?: boolean;
  draggable?: boolean;
  theme?: Theme;
  type?: TypeOptions;
  toastId?: Id;
  containerId?: Id;
}

type CloseToastFunc = ((reason?: boolean | string) => void) & ((e: React.MouseEvent) => void);