CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-toastify

React notification library for adding customizable toast notifications to applications

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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);
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-toastify@11.0.x
Publish Source
CLI
Badge
tessl/npm-react-toastify badge