tessl/npm-react-toastify

React notification library for adding customizable toast notifications to applications

—

Pending

Overview

Eval results

Files

Transitions

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

Built-in animation components for smooth toast transitions, plus utilities for creating custom animations. React Toastify provides four pre-built transition components and a flexible system for creating custom transitions.

Capabilities

Built-in Transition Components

Pre-built animation components ready to use with ToastContainer.

/**
 * Bounce animation transition - toasts bounce in and out
 */
const Bounce: React.FC<ToastTransitionProps>;

/**
 * Slide animation transition - toasts slide in from the side
 */
const Slide: React.FC<ToastTransitionProps>;

/**
 * Zoom animation transition - toasts zoom in and out with scale effect
 */
const Zoom: React.FC<ToastTransitionProps>;

/**
 * Flip animation transition - toasts flip in with a 3D rotation effect
 */
const Flip: React.FC<ToastTransitionProps>;

interface ToastTransitionProps {
  isIn: boolean;
  done: () => void;
  position: ToastPosition | string;
  preventExitTransition: boolean;
  nodeRef: React.RefObject<HTMLElement>;
  children?: React.ReactNode;
  playToast(): void;
}

Usage Examples:

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

// Bounce transition (default)
<ToastContainer transition={Bounce} />

// Slide transition
<ToastContainer transition={Slide} />

// Zoom transition
<ToastContainer transition={Zoom} />

// Flip transition
<ToastContainer transition={Flip} />

Bounce Transition

The default transition with a bouncy spring animation.

/**
 * Bounce transition provides a spring-like bounce effect
 * - Entry: Bounces in from the edge with spring physics
 * - Exit: Bounces out with fade effect
 * - Best for: Playful, attention-grabbing notifications
 */
const Bounce: React.FC<ToastTransitionProps>;

Usage Example:

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

<ToastContainer 
  transition={Bounce}
  position="top-right"
/>

Slide Transition

Smooth sliding animation from the container edge.

/**
 * Slide transition provides smooth sliding motion
 * - Entry: Slides in from the appropriate edge based on position
 * - Exit: Slides out to the same edge
 * - Best for: Clean, professional interfaces
 */
const Slide: React.FC<ToastTransitionProps>;

Usage Example:

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

<ToastContainer 
  transition={Slide}
  position="bottom-center"
/>

Zoom Transition

Scale-based zoom animation with opacity changes.

/**
 * Zoom transition provides scale-based animation
 * - Entry: Zooms in from small scale with fade in
 * - Exit: Zooms out to small scale with fade out
 * - Best for: Modern, subtle animations
 */
const Zoom: React.FC<ToastTransitionProps>;

Usage Example:

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

<ToastContainer 
  transition={Zoom}
  position="top-center"
/>

Flip Transition

3D rotation animation for dramatic effect.

/**
 * Flip transition provides 3D rotation animation
 * - Entry: Flips in with Y-axis rotation
 * - Exit: Flips out with Y-axis rotation
 * - Best for: Dynamic, engaging user experiences
 */
const Flip: React.FC<ToastTransitionProps>;

Usage Example:

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

<ToastContainer 
  transition={Flip}
  position="top-left"
/>

Custom Transitions with cssTransition

Create custom transition animations using CSS classes.

/**
 * Creates a custom transition component using CSS classes
 * @param config - Configuration object defining CSS classes for animation states
 * @returns Custom transition component
 */
function cssTransition(config: CSSTransitionProps): React.FC<ToastTransitionProps>;

interface CSSTransitionProps {
  /** CSS class applied when toast is entering */
  enter: string;
  /** CSS class applied when toast is entered/visible */
  enterActive?: string;
  /** CSS class applied when toast is exiting */
  exit: string;
  /** CSS class applied when toast is exited/hidden */
  exitActive?: string;
  /** Optional duration in milliseconds */
  duration?: number | { enter: number; exit: number };
  /** Whether to append position-based classes */
  appendPosition?: boolean;
  /** Collapse toast height on exit */
  collapse?: boolean;
  /** Collapse duration in milliseconds */
  collapseDuration?: number;
}

Custom Transition Example:

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

// Create custom fade transition
const CustomFade = cssTransition({
  enter: 'custom-fade-enter',
  exit: 'custom-fade-exit',
  collapse: true,
  collapseDuration: 300
});

// CSS (in your stylesheet)
/*
.custom-fade-enter {
  animation: customFadeIn 300ms ease-in-out;
}

.custom-fade-exit {
  animation: customFadeOut 300ms ease-in-out;
}

@keyframes customFadeIn {
  from { 
    opacity: 0;
    transform: translateY(-20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes customFadeOut {
  from { 
    opacity: 1;
    transform: translateY(0);
  }
  to { 
    opacity: 0;
    transform: translateY(-20px);
  }
}
*/

// Use the custom transition
<ToastContainer transition={CustomFade} />

Position-Specific Transitions

Transitions can adapt to different container positions when appendPosition is enabled.

// Position-specific classes are automatically appended
const SlideWithPosition = cssTransition({
  enter: 'slide-enter',
  exit: 'slide-exit',
  appendPosition: true // Enables position-specific classes
});

// Generated classes will be:
// - slide-enter--top-right
// - slide-enter--bottom-left
// - etc.

CSS Example for Position-Specific Transitions:

/* Base slide animation */
.slide-enter {
  opacity: 0;
}

.slide-enter-active {
  opacity: 1;
  transition: opacity 300ms, transform 300ms;
}

/* Position-specific entry animations */
.slide-enter--top-right,
.slide-enter--top-left {
  transform: translateY(-100%);
}

.slide-enter--bottom-right,
.slide-enter--bottom-left {
  transform: translateY(100%);
}

.slide-enter--top-center {
  transform: translateY(-100%);
}

.slide-enter--bottom-center {
  transform: translateY(100%);
}

Collapse Animation

Control height collapse behavior during exit animations.

// Enable height collapse on exit
collapse?: boolean;

// Duration for collapse animation (separate from main transition)
collapseDuration?: number;

Usage Example:

const CollapsingFade = cssTransition({
  enter: 'fade-enter',
  exit: 'fade-exit', 
  duration: 300,
  collapse: true,        // Enable height collapse
  collapseDuration: 200  // Collapse after fade completes
});

Advanced Transition Patterns

Staggered Animations

Create staggered animations for multiple toasts.

const StaggeredSlide = cssTransition({
  enter: 'stagger-enter',
  exit: 'stagger-exit',
  duration: 400
});

// CSS with animation delays
/*
.stagger-enter {
  opacity: 0;
  transform: translateX(100%);
  animation-delay: calc(var(--toast-index, 0) * 50ms);
}
*/

Theme-Aware Transitions

Create transitions that adapt to the current theme.

const ThemeAwareSlide = cssTransition({
  enter: 'theme-slide-enter',
  exit: 'theme-slide-exit',
  duration: 300
});

// CSS that responds to theme classes
/*
.Toastify__toast-theme--light .theme-slide-enter {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.Toastify__toast-theme--dark .theme-slide-enter {
  box-shadow: 0 4px 12px rgba(255,255,255,0.15);
}
*/

Support Types

type ToastTransition = React.FC<ToastTransitionProps>;

interface ToastTransitionProps {
  isIn: boolean;
  done: () => void;
  position: ToastPosition;
  preventExitTransition?: boolean;
  nodeRef: React.RefObject<HTMLElement>;
  children?: React.ReactNode;
}

Install with Tessl CLI