or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

css-transition.mdindex.mdreplace-transition.mdswitch-transition.mdtransition-group.mdtransition.md
tile.json

tessl/npm-react-transition-group

A react component toolset for managing animations

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-transition-group@4.4.x

To install, run

npx @tessl/cli install tessl/npm-react-transition-group@4.4.0

index.mddocs/

React Transition Group

React Transition Group is a comprehensive animation library for React applications that provides a set of components for managing component states over time, specifically designed with animation in mind. The library offers five main components - Transition, CSSTransition, SwitchTransition, TransitionGroup, and ReplaceTransition - that handle mounting and unmounting animations, CSS class-based transitions, switching between components, managing lists of transitioning components, and animating between two specific children respectively.

Package Information

  • Package Name: react-transition-group
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install react-transition-group

Core Imports

import { Transition, CSSTransition, TransitionGroup, SwitchTransition, ReplaceTransition, config } from "react-transition-group";

For CommonJS:

const { Transition, CSSTransition, TransitionGroup, SwitchTransition, ReplaceTransition, config } = require("react-transition-group");

Basic Usage

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

function App() {
  const [inProp, setInProp] = useState(false);
  
  return (
    <div>
      <CSSTransition in={inProp} timeout={200} classNames="my-node">
        <div>
          {"I'll receive my-node-* classes"}
        </div>
      </CSSTransition>
      <button type="button" onClick={() => setInProp(true)}>
        Click to Enter
      </button>
    </div>
  );
}

Architecture

React Transition Group is built around several key concepts:

  • State-Based Transitions: Components track transition states (entering, entered, exiting, exited) over time
  • Lifecycle Callbacks: Hooks for transition events (onEnter, onEntering, onEntered, onExit, onExiting, onExited)
  • Flexible Children: Support for both function-as-children and element children patterns
  • Group Management: Automatic coordination of multiple transitions in lists or groups
  • CSS Integration: Seamless integration with CSS transitions and animations via class name management

Capabilities

Base Transition Component

Platform-agnostic base component for managing transition states over time. Provides the core state machine for all other transition components.

function Transition({
  nodeRef,
  children,
  in: inProp,
  mountOnEnter,
  unmountOnExit,
  appear,
  enter,
  exit,
  timeout,
  addEndListener,
  onEnter,
  onEntering,
  onEntered,
  onExit,
  onExiting,
  onExited,
  ...otherProps
}): JSX.Element;

// State constants
const UNMOUNTED = 'unmounted';
const EXITED = 'exited';
const ENTERING = 'entering';
const ENTERED = 'entered';
const EXITING = 'exiting';

Base Transition

CSS Transitions

CSS class-based transition component that applies CSS classes during different transition phases. Built upon the base Transition component with additional CSS class management.

function CSSTransition({
  classNames,
  onEnter,
  onEntering,
  onEntered,
  onExit,
  onExiting,
  onExited,
  ...transitionProps
}): JSX.Element;

CSS Transitions

Transition Groups

Manages a set of transition components in a list, automatically handling mounting and unmounting of list items with proper transition coordination.

function TransitionGroup({
  component,
  children,
  appear,
  enter,
  exit,
  childFactory,
  ...otherProps
}): JSX.Element;

Transition Groups

Switch Transitions

Controls transitions between two states with different sequencing modes, inspired by Vue.js transition modes for controlled component switching.

function SwitchTransition({
  mode, // 'out-in' | 'in-out'
  children
}): JSX.Element;

Switch Transitions

Replace Transitions

Specialized transition component that animates between exactly two children, useful for controlled switching between two specific components.

function ReplaceTransition({
  in: inProp,
  children, // Must be exactly two transition components
  onEnter,
  onEntering,
  onEntered,
  onExit,
  onExiting,
  onExited,
  ...otherProps
}): JSX.Element;

Replace Transitions

Global Configuration

The config object allows global control over all transitions in the application.

import { config } from 'react-transition-group';

/**
 * Global configuration object for controlling transition behavior
 */
const config = {
  /** Globally disable all transitions when set to true */
  disabled: boolean;
};

Set config.disabled = true to disable all transitions globally, useful for testing or accessibility preferences. When disabled, all transition components will skip animations and immediately apply final states.

Common Types

// Timeout configuration
type Timeout = number | {
  appear?: number;
  enter?: number;
  exit?: number;
};

// CSS class name configuration
type ClassNames = string | {
  appear?: string;
  appearActive?: string;
  appearDone?: string;
  enter?: string;
  enterActive?: string;
  enterDone?: string;
  exit?: string;
  exitActive?: string;
  exitDone?: string;
};

// Node reference for direct DOM access
type NodeRef = React.RefObject<HTMLElement>;

// Transition lifecycle callbacks (node is undefined when nodeRef is used)
type TransitionCallback = (node?: HTMLElement, isAppearing?: boolean) => void;
type EndListenerCallback = (node: HTMLElement, done: () => void) => void;