CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-transition-group

A react component toolset for managing animations

—

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