@syncfusion/react-base/src/animate.d.ts

A common package of core React base, methods and class definitions

import { ReactElement } from 'react';
import { Effect } from './animation';
/**
 * Interface for animate component props
 */
export interface AnimateProps {
    /**
     * Controls whether the animation plays the "in" (enter) or "out" (exit) effect.
     *
     * @default true
     */
    in?: boolean;
    /**
     * Determines if the animation should run on the initial mount.
     *
     * @default true
     */
    appear?: boolean;
    /**
     * Specifies the duration of the animate in milliseconds.
     *
     * @default 400
     */
    duration?: number;
    /**
     * Specifies the timing function for the animate.
     *
     * @default 'ease'
     */
    timingFunction?: string;
    /**
     * Specifies the delay before the animate starts in milliseconds.
     *
     * @default 0
     */
    delay?: number;
    /**
     * The content to be animated - must be a single React element.
     */
    children: ReactElement;
    /**
     * Additional CSS class names to apply to the animate element.
     */
    className?: string;
    /**
     * Triggers when animate is in-progress, providing progress information.
     *
     * @event progress
     */
    onProgress?: (args: AnimateEvent) => void;
    /**
     * Triggers when the animate starts, allowing execution of logic at animate start.
     *
     * @event begin
     */
    onBegin?: (args: AnimateEvent) => void;
    /**
     * Triggers when animate is completed, allowing execution of logic after animate finishes.
     *
     * @event end
     */
    onEnd?: (args: AnimateEvent) => void;
    /**
     * Triggers when animate fails due to errors, providing error information.
     *
     * @event fail
     */
    onFail?: (args: AnimateEvent) => void;
    /**
     * Internal prop to identify the component type for validation
     *
     * @private
     */
    componentType?: 'Fade' | 'Flip' | 'Slide' | 'Zoom';
    /**
     * Internal prop for style declaration for smooth animation
     *
     * @private
     */
    style?: CSSStyleDeclaration;
}
/**
 * Internal interface to trigger animate events with type validation
 *
 * @private
 */
export interface AnimateEvent {
    /**
     * Current timestamp of the animate.
     */
    timeStamp?: number;
    /**
     * The element being animated.
     */
    element?: HTMLElement | {
        element?: HTMLElement;
    };
    /**
     * animate type.
     */
    effect?: Effect;
    /**
     * animate duration in milliseconds.
     */
    duration?: number;
    /**
     * animate delay in milliseconds.
     */
    delay?: number;
    /**
     * animate timing function.
     */
    timingFunction?: string;
}
export interface IAnimate extends AnimateProps {
    /**
     * animate element reference.
     *
     * @private
     */
    element: HTMLElement | null;
    /**
     * Stops the current animate.
     *
     * @returns {void}
     */
    stop?(): void;
}
type GlobalAnimateProps = {
    effect?: Effect;
} & AnimateProps;
/**
 * The Animate component provides options to animate HTML DOM elements.
 * It allows wrapping content with animation effects that can be controlled via props.
 *
 * ```tsx
 * <Animate effect="FadeIn" duration={3000}>
 *   <div>Animation content</div>
 * </Animate>
 * ```
 */
export declare const Animate: React.ForwardRefExoticComponent<GlobalAnimateProps & React.RefAttributes<IAnimate>>;
export default Animate;
/**
 *  Fade component with in/out transition control
 */
export type FadeProps = AnimateProps;
/**
 *  Fade component that automatically handles in/out transitions.
 * Uses FadeIn when `in=true` and FadeOut when `in=false`.
 *
 * @example
 * ```tsx
 * import { Fade } from '@syncfusion/react-base';
 *
 * <Fade in={isVisible} duration={500}>
 *   <div>Content to fade</div>
 * </Fade>
 * ```
 */
export declare const Fade: React.ForwardRefExoticComponent<FadeProps & React.RefAttributes<IAnimate>>;
/**
 *  Zoom component with in/out transition control
 */
export type ZoomProps = AnimateProps;
/**
 *  Zoom component that automatically handles in/out transitions.
 * Uses ZoomIn when `in=true` and ZoomOut when `in=false`.
 *
 * @example
 * ```tsx
 * import { Zoom } from '@syncfusion/react-base';
 *
 * <Zoom in={isVisible} duration={600}>
 *   <div>Content to zoom</div>
 * </Zoom>
 * ```
 */
export declare const Zoom: React.ForwardRefExoticComponent<ZoomProps & React.RefAttributes<IAnimate>>;
/**
 *  Slide component with in/out transition control and direction support
 */
export interface SlideProps extends AnimateProps {
    /**
     * Specifies the direction of the slide animation.
     * Applicable values: 'Top', 'Bottom', 'Left', 'Right'
     *
     * @default 'Right'
     */
    direction?: 'Top' | 'Bottom' | 'Left' | 'Right';
}
/**
 *  Slide component that automatically handles in/out transitions with direction control.
 * Uses Slide{Direction}In when `in=true` and Slide{Direction}Out when `in=false`.
 *
 * @example
 * ```tsx
 * import { Slide } from '@syncfusion/react-base';
 *
 * <Slide in={isVisible} direction="Left" duration={800}>
 *   <div>Content to slide</div>
 * </Slide>
 * ```
 */
export declare const Slide: React.ForwardRefExoticComponent<SlideProps & React.RefAttributes<IAnimate>>;
/**
 *  Flip component with in/out transition control and direction support
 */
export interface FlipProps extends AnimateProps {
    /**
     * Specifies the direction of the flip animation.
     * Applicable values: 'LeftDown', 'LeftUp', 'RightDown', 'RightUp', 'XDown', 'XUp', 'YLeft', 'YRight'
     *
     * @default 'XUp'
     */
    direction?: 'LeftDown' | 'LeftUp' | 'RightDown' | 'RightUp' | 'XDown' | 'XUp' | 'YLeft' | 'YRight';
}
/**
 *  Flip component that automatically handles in/out transitions with direction control.
 * Uses Flip{Direction}In when `in=true` and Flip{Direction}Out when `in=false`.
 *
 * @example
 * ```tsx
 * import { Flip } from '@syncfusion/react-base';
 *
 * <Flip in={isVisible} direction="YRight" duration={1200}>
 *   <div>Content to flip</div>
 * </Flip>
 * ```
 */
export declare const Flip: React.ForwardRefExoticComponent<FlipProps & React.RefAttributes<IAnimate>>;