or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

css-transition.md index.md switch-transition.md transition-group.md transition.md

tile.json

React Transition Group Types

TypeScript definitions for react-transition-group - A set of components for managing component states over time, specifically designed with animation in mind. These types enable full TypeScript support for creating smooth animations and transitions in React applications.

Package Information

Package Name: @types/react-transition-group
Package Type: npm
Language: TypeScript
Installation: npm install @types/react-transition-group

Core Imports

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

For individual component imports:

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

Basic Usage

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

const FadeComponent: React.FC = () => {
  const [show, setShow] = useState(false);

  return (
    <>
      <button onClick={() => setShow(!show)}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div>Fading content</div>
      </CSSTransition>
    </>
  );
};

Architecture

React Transition Group is built around four core components:

Transition: Base component providing lifecycle callbacks for transitions
CSSTransition: Extends Transition with CSS class management for animations
SwitchTransition: Manages transitions between different components
TransitionGroup: Coordinates multiple child transitions in dynamic lists
Generic Typing: Full support for DOM element references with RefElement parameter

Capabilities

Transition Component

Core transition component providing lifecycle callbacks and state management for entering and exiting elements.

type TransitionProps<RefElement extends undefined | HTMLElement = undefined> =
  | TimeoutProps<RefElement>
  | EndListenerProps<RefElement>;

interface BaseTransitionProps<RefElement extends undefined | HTMLElement> {
  in?: boolean;
  mountOnEnter?: boolean;
  unmountOnExit?: boolean;
  children?: TransitionChildren;
  nodeRef?: React.Ref<RefElement>;
  onEnter?: EnterHandler<RefElement>;
  onEntering?: EnterHandler<RefElement>;
  onEntered?: EnterHandler<RefElement>;
  onExit?: ExitHandler<RefElement>;
  onExiting?: ExitHandler<RefElement>;
  onExited?: ExitHandler<RefElement>;
  appear?: boolean;
  enter?: boolean;
  exit?: boolean;
}

interface TimeoutProps<RefElement> extends BaseTransitionProps<RefElement> {
  timeout: number | { appear?: number; enter?: number; exit?: number };
  addEndListener?: EndHandler<RefElement>;
}

interface EndListenerProps<RefElement> extends BaseTransitionProps<RefElement> {
  timeout?: number | { appear?: number; enter?: number; exit?: number };
  addEndListener: EndHandler<RefElement>;
}

declare class Transition<RefElement extends HTMLElement | undefined> extends Component<TransitionProps<RefElement>> {}

Transition

CSS Transition Component

Extends Transition with automatic CSS class management for smooth CSS-based animations.

interface CSSTransitionProps<Ref extends undefined | HTMLElement = undefined> extends TransitionProps<Ref> {
  classNames?: string | CSSTransitionClassNames;
}

interface CSSTransitionClassNames {
  appear?: string;
  appearActive?: string;
  appearDone?: string;
  enter?: string;
  enterActive?: string;
  enterDone?: string;
  exit?: string;
  exitActive?: string;
  exitDone?: string;
}

declare class CSSTransition<Ref extends undefined | HTMLElement> extends Component<CSSTransitionProps<Ref>> {}

CSS Transition

Switch Transition Component

Controls transitions between different components with "out-in" or "in-out" modes.

interface SwitchTransitionProps {
  mode?: "out-in" | "in-out";
  children: ReactElement;
}

declare class SwitchTransition extends Component<SwitchTransitionProps> {}

Switch Transition

Transition Group Component

Manages multiple child transitions in dynamic lists, automatically handling mounting and unmounting.

type TransitionGroupProps<T extends keyof JSX.IntrinsicElements = "div", V extends ElementType = any> =
  | (IntrinsicTransitionGroupProps<T> & JSX.IntrinsicElements[T])
  | (ComponentTransitionGroupProps<V>) & {
      children?: ReactElement<TransitionProps<any>> | Array<ReactElement<TransitionProps<any>>>;
      childFactory?(child: ReactElement): ReactElement;
    };

interface IntrinsicTransitionGroupProps<T extends keyof JSX.IntrinsicElements = "div"> {
  component?: T | null;
  appear?: boolean;
  enter?: boolean;
  exit?: boolean;
}

interface ComponentTransitionGroupProps<T extends ElementType> {
  component: T;
  appear?: boolean;
  enter?: boolean;
  exit?: boolean;
}

declare class TransitionGroup extends Component<TransitionGroupProps> {}

Transition Group

Core Types

type TransitionStatus = "entering" | "entered" | "exiting" | "exited" | "unmounted";

type TransitionChildren = 
  | ReactNode 
  | ((status: TransitionStatus, childProps?: Record<string, unknown>) => ReactNode);

type EnterHandler<RefElement extends undefined | HTMLElement> = RefElement extends undefined 
  ? (isAppearing: boolean) => void
  : (node: HTMLElement, isAppearing: boolean) => void;

type ExitHandler<RefElement extends undefined | HTMLElement> = RefElement extends undefined
  ? () => void
  : (node: HTMLElement) => void;

type EndHandler<RefElement extends undefined | HTMLElement> = RefElement extends undefined
  ? (done: () => void) => void  
  : (node: HTMLElement, done: () => void) => void;

interface Config {
  disabled: boolean;
}

Configuration

declare const config: Config;

Global configuration object for disabling transitions across the entire application.