react-transition-preset/dist/Transition.d.ts

Lightweight, zero-dependency transition component for React with common preset transition

import { TransitionMode } from './presets.js';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { UseInViewOptions } from './hooks/use-in-view.js';
import 'react';
import './viewport/index.js';

interface TransitionProps<T extends keyof JSX.IntrinsicElements = 'div'> {
    /**
     * @description Determines whether component should be mounted to the DOM
     * @default false
     */
    mounted: boolean | 'whileInView';
    /**
     * @description If set element will not be unmounted from the DOM when it is hidden, `display: none` styles will be applied instead
     * @default false
     */
    keepMounted?: boolean;
    /**
     * @description If mounted is `whileInView`, this will determine the options for the useInView hook
     */
    viewport?: UseInViewOptions & {
        /** Custom placeholder element type. `div` by default */
        placeholder?: T;
        /** Placeholder attributes */
        attributes?: Omit<JSX.IntrinsicElements[T], 'ref'>;
    };
    /**
     * @description Transition name or object
     * @default 'fade'
     */
    transition?: TransitionMode;
    /**
     * @description Determines whether to set the transition when initializing
     * @default false
     */
    initial?: boolean;
    /**
     * @description Transition duration (s)
     * @default 0.2
     */
    duration?: number;
    /**
     * @description Exit transition duration (s)
     * @default 0.2
     */
    exitDuration?: number;
    /**
     * @description Transition timing function
     * @default 'ease'
     */
    timingFunction?: string;
    /**
     * @description Render function with transition styles argument
     */
    children: React.JSX.Element | ((styles: React.CSSProperties) => React.JSX.Element);
    /**
     * @description Determines whether to reduce motion
     * @default false
     */
    reduceMotion?: boolean;
    /**
     * @description Called when exit transition ends
     */
    onExited?: () => void;
    /**
     * @description Called when exit transition starts
     */
    onExit?: () => void;
    /**
     * @description Called when enter transition starts
     */
    onEnter?: () => void;
    /**
     * @description Called when enter transition ends
     */
    onEntered?: () => void;
    /**
     * @description Delay before enter transition starts (s)
     * @default 0
     */
    enterDelay?: number;
    /**
     * @description Delay before exit transition starts (s)
     * @default 0
     */
    exitDelay?: number;
    /**
     * DO NOT USE
     * @internal
     */
    unsafe_alwaysMounted?: boolean;
}
declare const Transition: <T extends keyof JSX.IntrinsicElements>({ mounted: _mounted, children, onExit, onEntered, onEnter, onExited, viewport, unsafe_alwaysMounted, ...rest }: TransitionProps<T>) => react_jsx_runtime.JSX.Element | null;

export { Transition, type TransitionProps };