react-transition-preset/dist/index.d.cts

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

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

type MarginValue = `${number}${'px' | '%'}`;
type MarginType = MarginValue | `${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue} ${MarginValue}`;
interface InViewOptions {
    root?: Element | Document;
    margin?: MarginType;
    amount?: 'some' | 'all' | number;
}

interface UseInViewOptions extends Omit<InViewOptions, 'root' | 'amount'> {
    root?: RefObject<Element>;
    once?: boolean;
    amount?: 'some' | 'all' | number;
}

interface TransitionStyles {
    common?: React.CSSProperties;
    in: React.CSSProperties;
    out: React.CSSProperties;
    transitionProperty: React.CSSProperties['transitionProperty'];
}
type TransitionName = 'fade' | 'fade-down' | 'fade-up' | 'fade-left' | 'fade-right' | 'skew-up' | 'skew-down' | 'rotate-right' | 'rotate-left' | 'slide-down' | 'slide-up' | 'slide-right' | 'slide-left' | 'scale-y' | 'scale-x' | 'scale' | 'pop' | 'pop-top' | 'pop-bottom' | 'pop-left' | 'pop-right' | 'pop-top-left' | 'pop-top-right' | 'pop-bottom-left' | 'pop-bottom-right';
type TransitionMode = TransitionName | TransitionStyles;
declare const presets: Record<TransitionName, TransitionStyles>;

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: JSX.Element | ((styles: React.CSSProperties) => 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;

type TransitionConfig = Pick<TransitionProps, 'transition' | 'duration' | 'exitDuration' | 'keepMounted' | 'enterDelay' | 'exitDelay' | 'timingFunction' | 'initial' | 'reduceMotion'>;
/**
 * 设置全局配置
 */
declare function setGlobalConfig(props: TransitionConfig): void;

export { Transition, presets, setGlobalConfig };