tessl/npm-react-transition-group

A react component toolset for managing animations

—

Pending

Overview

Eval results

Files

Base Transition

Name: tessl/npm-react-transition-group
Author: tessl

The Transition component is the platform-agnostic base component for managing component states over time. It provides the core state machine that all other transition components build upon.

Capabilities

Transition Component

The main Transition component that tracks transition states and manages lifecycle callbacks.

/**
 * Platform-agnostic transition component for managing component states over time
 * @param props - Transition props
 * @returns JSX element with transition state management
 */
function Transition({
  nodeRef,
  children,
  in: inProp,
  mountOnEnter,
  unmountOnExit,
  appear,
  enter,
  exit,
  timeout,
  addEndListener,
  onEnter,
  onEntering,
  onEntered,
  onExit,
  onExiting,
  onExited,
  ...otherProps
}): JSX.Element;

interface TransitionProps {
  /** React reference to DOM element that needs to transition */
  nodeRef?: React.RefObject<HTMLElement>;
  /** Function child or React element to render */
  children: ((state: string, props: any) => React.ReactNode) | React.ReactElement;
  /** Show the component; triggers enter or exit states */
  in?: boolean;
  /** Lazy mount component on first in={true} */
  mountOnEnter?: boolean;
  /** Unmount component after it finishes exiting */
  unmountOnExit?: boolean;
  /** Perform enter transition when first mounting */
  appear?: boolean;
  /** Enable or disable enter transitions */
  enter?: boolean;
  /** Enable or disable exit transitions */
  exit?: boolean;
  /** Duration of transition in milliseconds or timeout object (required unless addEndListener provided) */
  timeout?: number | {
    appear?: number;
    enter?: number;
    exit?: number;
  };
  /** Custom transition end trigger callback (alternative to timeout) */
  addEndListener?: (node: HTMLElement, done: () => void) => void;
  /** Callback fired before "entering" status is applied (node is undefined when nodeRef is used) */
  onEnter?: (node?: HTMLElement, isAppearing?: boolean) => void;
  /** Callback fired after "entering" status is applied (node is undefined when nodeRef is used) */
  onEntering?: (node?: HTMLElement, isAppearing?: boolean) => void;
  /** Callback fired after "entered" status is applied (node is undefined when nodeRef is used) */
  onEntered?: (node?: HTMLElement, isAppearing?: boolean) => void;
  /** Callback fired before "exiting" status is applied (node is undefined when nodeRef is used) */
  onExit?: (node?: HTMLElement) => void;
  /** Callback fired after "exiting" status is applied (node is undefined when nodeRef is used) */
  onExiting?: (node?: HTMLElement) => void;
  /** Callback fired after "exited" status is applied (node is undefined when nodeRef is used) */
  onExited?: (node?: HTMLElement) => void;
}

Note: Either the timeout prop OR the addEndListener prop must be provided. The timeout prop defines how long to wait before firing transition events, while addEndListener allows you to manually trigger when the transition should end.

Usage Examples:

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

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
};

const transitionStyles = {
  entering: { opacity: 1 },
  entered: { opacity: 1 },
  exiting: { opacity: 0 },
  exited: { opacity: 0 },
};

function Fade({ in: inProp }) {
  return (
    <Transition in={inProp} timeout={duration}>
      {state => (
        <div style={{
          ...defaultStyle,
          ...transitionStyles[state]
        }}>
          I'm a fade Transition!
        </div>
      )}
    </Transition>
  );
}

// Usage with function children
function App() {
  const [inProp, setInProp] = useState(false);
  return (
    <div>
      <Transition in={inProp} timeout={500}>
        {state => (
          <div>I'm {state}</div>
        )}
      </Transition>
      <button onClick={() => setInProp(true)}>
        Click to Enter
      </button>
    </div>
  );
}

Transition State Constants

Constants representing the different states of a transition.

/** Component is not mounted */
const UNMOUNTED = 'unmounted';
/** Component has exited */
const EXITED = 'exited';
/** Component is entering */
const ENTERING = 'entering';
/** Component has entered */
const ENTERED = 'entered';
/** Component is exiting */
const EXITING = 'exiting';

// Access via Transition static properties
Transition.UNMOUNTED; // 'unmounted'
Transition.EXITED;    // 'exited'
Transition.ENTERING;  // 'entering'
Transition.ENTERED;   // 'entered'
Transition.EXITING;   // 'exiting'

Transition Lifecycle

The Transition component follows a predictable state machine:

EXITED/UNMOUNTED → ENTERING (when in becomes true)
ENTERING → ENTERED (after timeout or addEndListener callback)
ENTERED → EXITING (when in becomes false)
EXITING → EXITED (after timeout or addEndListener callback)

If unmountOnExit is true, the component transitions to UNMOUNTED after EXITED.

Node Reference Usage

When using nodeRef, the DOM node is not passed to callback functions since you have direct access:

import React, { useRef } from 'react';
import { Transition } from 'react-transition-group';

function MyComponent() {
  const nodeRef = useRef(null);
  
  return (
    <Transition
      nodeRef={nodeRef}
      in={true}
      timeout={200}
      onEnter={() => {
        // nodeRef.current is available here
        console.log('Entering:', nodeRef.current);
      }}
    >
      <div ref={nodeRef}>
        Content with ref
      </div>
    </Transition>
  );
}

Install with Tessl CLI

npx tessl i tessl/npm-react-transition-group

docs

css-transition.md

index.md

replace-transition.md