react-transitioning/dist/index.d.mts

React components for easily implementing basic CSS animations and transitions

import * as react from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';

/**
 * Enum representing the different phases of a transition.
 * Each phase corresponds to a specific stage of the transition lifecycle.
 */
declare enum TransitionPhase {
    APPEAR = "appear",
    APPEAR_ACTIVE = "appearActive",
    APPEAR_DONE = "appearDone",
    ENTER = "enter",
    ENTER_ACTIVE = "enterActive",
    ENTER_DONE = "enterDone",
    EXIT = "exit",
    EXIT_ACTIVE = "exitActive",
    EXIT_DONE = "exitDone"
}
/**
 * Enum representing event callbacks for various transition phases.
 */
declare enum TransitionPhaseEvent {
    ENTER = "onEnter",
    ENTERING = "onEntering",
    ENTERED = "onEntered",
    EXIT = "onExit",
    EXITING = "onExiting",
    EXITED = "onExited"
}
/**
 * Type representing the state of each transition phase.
 * Each phase is associated with a boolean value indicating whether that phase is active.
 */
type TransitionState = {
    [key in TransitionPhase]: boolean;
};
type TransitionProps = {
    [key in TransitionPhaseEvent]?: () => void;
} & {
    /**
     * If true, the component is shown and transitions through the "appear", "enter", or "exit" phases to the "entered" state.
     * If false, it transitions through the "exit" phases to the "exited" state.
     *
     * @default false
     */
    in?: boolean;
    /**
     * If true, the transition will run the "appear" phases ("appear", "appearActive", "appearDone") when the component is first mounted.
     *
     * @default false
     */
    appear?: boolean;
    /**
     * If true, enables the "enter" phases ("enter", "enterActive", "enterDone") when the component enters.
     *
     * @default true
     */
    enter?: boolean;
    /**
     * If true, enables the "exit" phases ("exit", "exitActive", "exitDone") when the component leaves.
     *
     * @default true
     */
    exit?: boolean;
    /**
     * Duration of the transition in milliseconds. Can be used to override default durations for the phases.
     *
     * @default 500
     */
    duration?: number;
    /**
     * If true, the component remains mounted in the DOM even when it transitions to the "exited" state.
     *
     * @default false
     */
    alwaysMounted?: boolean;
    /**
     * A function called to manually handle the end of a transition phase.
     *
     * @param phase - The current transition phase (e.g., "appear", "enter", "exit").
     * @param done - A callback function to signal that the phase is complete.
     */
    addEndListener?: (phase: TransitionPhase, done: () => void) => void;
    /**
     * A render function that provides the current transition state and active phase.
     *
     * @param transitionState - The current state of the transition, indicating which phase is active.
     * @param activePhase - The phase currently in progress (e.g., "appearActive", "enterDone").
     * @returns React nodes to render.
     */
    children: React.ReactNode | ((transitionState: TransitionState, activePhase: TransitionPhase) => React.ReactNode);
};
/**
 * The `Transition` component handles the animation lifecycle of a component as it enters and exits
 * the DOM. The component can manage transitions for different phases: "appear", "enter",
 * and "exit", with each phase having an active state and a done state. These phases can be triggered and
 * customized based on the visibility of the component (controlled by the `in` prop).
 */
declare function Transition(props: TransitionProps): react.ReactNode;

type TransitionGroupProps = {
    children: React.ReactNode;
    /**
     * A boolean indicating whether the children should transition through the "appear"
     * phase when the component is first mounted.
     *
     * @default false
     */
    appear?: boolean;
    /**
     * A boolean indicating whether the children should transition through the "enter"
     * phases when they are added to the DOM.
     *
     * @default true
     */
    enter?: boolean;
    /**
     * A boolean indicating whether the children should transition through the "exit"
     * phases when they are removed from the DOM.
     *
     * @default false
     */
    exit?: boolean;
    /**
     * The duration of the transition in milliseconds. This value can be used to set the
     * transition duration for all children in the group.
     *
     * @default 500
     */
    duration?: number;
};
/**
 * The `TransitionGroup` component handles a collection of `Transition` child elements
 * and applies transition animations when elements enter and exit the DOM.
 * It can be used to animate multiple elements, controlling their appearance and removal in a container.
 */
declare function TransitionGroup(props: TransitionGroupProps): react.ReactElement<unknown, string | react.JSXElementConstructor<any>>[];

/**
 * Type representing styles for different transition phases.
 * `TransitionPhase` is the key representing different phases, and the value is a `React.CSSProperties` object.
 */
type StyleTransitionStyles = {
    [key in TransitionPhase]?: React.CSSProperties;
};
type StyleTransitionProps = Omit<TransitionProps, 'children'> & {
    /**
     * The child element to which the animation will be applied.
     * This should be a single React element that supports the `style` prop.
     * The `style` prop will be combined with the styles specified in the `styles` prop for the current transition phase.
     */
    children: React.ReactElement<{
        style?: React.CSSProperties;
    }>;
    /**
     * An object containing styles for different animation phases.
     * `TransitionPhase` indicates the animation phase, for which specific styles can be applied.
     * Each phase style is represented by a `React.CSSProperties` object.
     */
    styles: StyleTransitionStyles;
};
/**
 * The `StyleTransition` component allows you to animate the styles of a component across different
 * transition phases. It automatically manages the styles for each transition phase
 * (e.g., "appear", "enter", "exit") and applies them to the `children` element.
 */
declare function StyleTransition(props: StyleTransitionProps): react_jsx_runtime.JSX.Element;

/**
 * `CSSTransitionClassNames` represents the class names used for CSS-based transitions in different phases.
 * This type can either be a single string, which will be applied to all transition phases
 * with a suffix added based on the current phase, or an object where each key
 * corresponds to a specific transition phase, and the value is the class name for that phase.
 */
type CSSTransitionClassNames = string | {
    [key in TransitionPhase]?: string;
};
type CSSTransitionProps = Omit<TransitionProps, 'children'> & {
    /**
     * The child element to which the animation will be applied.
     * This should be a single React element that supports the `className` prop.
     * The `className` prop will be combined with the class name from the `classNames` prop, based on the current transition phase.
     */
    children: React.ReactElement<{
        className?: string;
    }>;
    /**
     * Defines the CSS class names to be applied for each transition phase.
     */
    classNames: CSSTransitionClassNames;
};
/**
 * The `CSSTransition` component applies CSS transitions based on the phase of a transition lifecycle.
 * It automatically manages the class names for each transition phase (e.g., "appear", "enter", "exit")
 * and applies them to the `children` element.
 */
declare function CSSTransition(props: CSSTransitionProps): react_jsx_runtime.JSX.Element;

export { CSSTransition, type CSSTransitionClassNames, type CSSTransitionProps, StyleTransition, type StyleTransitionProps, type StyleTransitionStyles, Transition, TransitionGroup, type TransitionGroupProps, TransitionPhase, TransitionPhaseEvent, type TransitionProps, type TransitionState };