tessl/npm-react-toastify

React notification library for adding customizable toast notifications to applications

—

Pending

Overview

Eval results

Files

Toast Container

Name: tessl/npm-react-toastify
Author: tessl

The ToastContainer is the main React component that renders and manages toast notifications. It provides extensive configuration options for positioning, styling, interaction behavior, and animation settings.

Capabilities

ToastContainer Component

Main container component that must be added to your React app to display toast notifications.

/**
 * Main container component for rendering toast notifications
 * @param props - Configuration props for the container
 * @returns JSX.Element - The toast container
 */
function ToastContainer(props: ToastContainerProps): JSX.Element;

interface ToastContainerProps {
  // Positioning and Layout
  position?: ToastPosition;
  stacked?: boolean;
  newestOnTop?: boolean;
  
  // Auto-close and Timing
  autoClose?: number | false;
  hideProgressBar?: boolean;
  closeButton?: boolean | ((props: CloseButtonProps) => React.ReactNode);
  
  // Interaction
  closeOnClick?: boolean;
  pauseOnHover?: boolean;
  pauseOnFocusLoss?: boolean;
  draggable?: boolean;
  draggablePercent?: number;
  draggableDirection?: DraggableDirection;
  
  // Styling and Theming
  theme?: Theme;
  transition?: ToastTransition;
  rtl?: boolean;
  toastClassName?: ToastClassName;
  bodyClassName?: ToastClassName;
  style?: React.CSSProperties;
  toastStyle?: React.CSSProperties;
  className?: string;
  
  // Queue and Limits
  limit?: number;
  enableMultiContainer?: boolean;
  containerId?: Id;
  
  // Icons and Components
  icon?: ToastIcon;
  
  // Progress Bar Styling
  progressClassName?: ToastClassName;
  
  // Accessibility
  role?: string;
  rtl?: boolean;
  hotKeys?: (e: KeyboardEvent) => boolean;
  'aria-label'?: string;
  
  // Event Handlers
  onOpen?: (props: ToastContentProps) => void;
  onClose?: (props: ToastContentProps) => void;
  onClick?: (event: React.MouseEvent) => void;
  
  // Advanced Features
  delay?: number;
}

Basic Usage:

import React from 'react';
import { ToastContainer } from 'react-toastify';

function App() {
  return (
    <div>
      {/* Your app content */}
      <ToastContainer />
    </div>
  );
}

Advanced Configuration:

import { ToastContainer, Slide } from 'react-toastify';

function App() {
  return (
    <div>
      {/* Your app content */}
      <ToastContainer
        position="top-right"
        autoClose={5000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
        theme="light"
        transition={Slide}
      />
    </div>
  );
}

Positioning Options

Control where toasts appear on the screen.

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

Usage Examples:

// Top right corner (default)
<ToastContainer position="top-right" />

// Bottom center
<ToastContainer position="bottom-center" />

// Top left corner
<ToastContainer position="top-left" />

Theming Options

Built-in theme support with custom theming capability.

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

Usage Examples:

// Light theme (default)
<ToastContainer theme="light" />

// Dark theme
<ToastContainer theme="dark" />

// Colored theme (colorful backgrounds)
<ToastContainer theme="colored" />

// Custom theme (CSS class name)
<ToastContainer theme="my-custom-theme" />

Auto-close Configuration

Control automatic dismissal of toasts.

// Auto-close after specified milliseconds, or disable with false
autoClose?: number | false;

// Hide the progress bar
hideProgressBar?: boolean;

Usage Examples:

// Auto-close after 3 seconds
<ToastContainer autoClose={3000} />

// Disable auto-close
<ToastContainer autoClose={false} />

// Hide progress bar
<ToastContainer hideProgressBar />

// Show progress bar (default)
<ToastContainer hideProgressBar={false} />

Interaction Settings

Configure user interaction behaviors.

// Click to close
closeOnClick?: boolean;

// Pause on hover
pauseOnHover?: boolean;

// Pause when window loses focus
pauseOnFocusLoss?: boolean;

// Enable drag to dismiss
draggable?: boolean;

// Percentage of drag needed to dismiss (0-100)
draggablePercent?: number;

// Drag direction
draggableDirection?: DraggableDirection;

Usage Examples:

// Full interaction configuration
<ToastContainer
  closeOnClick
  pauseOnHover
  pauseOnFocusLoss
  draggable
  draggablePercent={80}
  draggableDirection="x"
/>

// Minimal interaction
<ToastContainer
  closeOnClick={false}
  pauseOnHover={false}
  draggable={false}
/>

Queue Management

Control toast queue behavior and limits.

// Maximum number of toasts to display
limit?: number;

// Stack toasts vertically (new feature)
stacked?: boolean;

// Show newest toasts on top
newestOnTop?: boolean;

// Enable multiple containers
enableMultiContainer?: boolean;

// Container identifier for multiple containers
containerId?: Id;

Usage Examples:

// Limit to 3 toasts
<ToastContainer limit={3} />

// Stack toasts
<ToastContainer stacked />

// Oldest toasts on top
<ToastContainer newestOnTop={false} />

// Multiple containers
<ToastContainer containerId="main" enableMultiContainer />
<ToastContainer containerId="sidebar" enableMultiContainer />

Custom Styling

Customize appearance with CSS classes and styles.

// CSS class for individual toasts
toastClassName?: ToastClassName;

// CSS class for toast body content
bodyClassName?: ToastClassName;

// Container styles
style?: React.CSSProperties;

// Individual toast styles
toastStyle?: React.CSSProperties;

// Container CSS class
className?: string;

type ToastClassName = string | ((context?: {
  type?: TypeOptions;
  defaultClassName?: string;
  position?: ToastPosition;
  rtl?: boolean;
}) => string);

Usage Examples:

// Static CSS classes
<ToastContainer 
  className="my-toast-container"
  toastClassName="my-toast"
  bodyClassName="my-toast-body"
/>

// Dynamic CSS classes
<ToastContainer
  toastClassName={({ type, defaultClassName }) => 
    `${defaultClassName} my-toast--${type}`
  }
/>

// Inline styles
<ToastContainer
  style={{ fontSize: '14px' }}
  toastStyle={{ backgroundColor: '#f0f0f0' }}
/>

Close Button Customization

Customize or disable the close button.

// Boolean to show/hide default close button, or custom component
closeButton?: boolean | ((props: CloseButtonProps) => React.ReactNode);

interface CloseButtonProps {
  closeToast: (e: React.MouseEvent<HTMLElement>) => void;
  type: TypeOptions;
  ariaLabel?: string;
  theme: Theme;
}

Usage Examples:

// Hide close button
<ToastContainer closeButton={false} />

// Show default close button
<ToastContainer closeButton />

// Custom close button
<ToastContainer
  closeButton={({ closeToast }) => (
    <button onClick={closeToast} className="custom-close">
      ✕
    </button>
  )}
/>

Accessibility Features

Built-in accessibility support with customization options.

// ARIA role for the container
role?: string;

// Right-to-left language support
rtl?: boolean;

// Keyboard shortcut to focus first notification (default: Alt+T)
hotKeys?: (e: KeyboardEvent) => boolean;

Usage Examples:

// Custom ARIA role
<ToastContainer role="alert" />

// RTL support
<ToastContainer rtl />

// Custom keyboard shortcut (Cmd+F instead of Alt+T)
<ToastContainer
  hotKeys={(e) => e.metaKey && e.key === 'f'}
/>

// Disable keyboard shortcuts
<ToastContainer
  hotKeys={() => false}
/>

Event Handlers

React to container-level events.

// Called when any toast opens
onOpen?: (props: ToastContentProps) => void;

// Called when any toast closes
onClose?: (props: ToastContentProps) => void;

Usage Examples:

<ToastContainer
  onOpen={(props) => {
    console.log('Toast opened:', props.toastProps.toastId);
  }}
  onClose={(props) => {
    console.log('Toast closed:', props.toastProps.toastId);
  }}
/>

Multiple Containers

You can use multiple ToastContainer instances for different areas of your app.

Usage Example:

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

function App() {
  const notifyA = () => toast("Default container");
  const notifyB = () => toast("Custom container", { containerId: 'B' });

  return (
    <div>
      <button onClick={notifyA}>Notify A</button>
      <button onClick={notifyB}>Notify B</button>
      
      {/* Default container */}
      <ToastContainer />
      
      {/* Custom container */}
      <ToastContainer
        containerId="B"
        position="bottom-left"
        enableMultiContainer
      />
    </div>
  );
}

Install with Tessl CLI