@progress/kendo-react-animation/Zoom.d.ts

React Animation component assists with animating HTML elements. KendoReact Animation package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { default as PropTypes } from 'prop-types';
import { AnimationInterface } from './AnimationInterface.js';
import * as React from 'react';
/**
 * Specifies the direction of the Zoom Animation ([see example](https://www.telerik.com/kendo-react-ui/components/animation/direction#toc-zoom)).
 *
 * The supported directions are:
 * * (Default) `out`—Zooms the content from the outside to the inside.
 * * `in`—Zooms the content from the inside to the outside.
 */
export type ZoomDirection = 'in' | 'out';
/**
 * Represents the props of the [KendoReact Zoom Animation component](https://www.telerik.com/kendo-react-ui/components/animation/types#toc-zoom).
 */
export interface ZoomProps extends AnimationInterface {
    /**
     * A function for customizing the rendering of child elements.
     *
     * @example
     * <Zoom childFactory={(child) => React.cloneElement(child, { className: 'custom-class' })} />
     */
    childFactory?: any;
    /**
     * Specifies the CSS class names to be applied to the Animation container.
     *
     * @example
     * <Zoom className="zoom-animation" />
     */
    className?: string;
    /**
     * Specifies the direction of the Zoom Animation.
     *
     * @default "out"
     * @example
     * <Zoom direction="in" />
     */
    direction?: ZoomDirection;
    /**
     * Specifies the HTML tag of the parent Animation container.
     *
     * @default "div"
     * @example
     * <Zoom component="section" />
     */
    component?: React.ReactNode;
    /**
     * Specifies the `id` attribute of the Animation container.
     *
     * @example
     * <Zoom id="zoom-animation-container" />
     */
    id?: string;
    /**
     * Specifies the inline styles to be applied to the Animation container.
     *
     * @example
     * <Zoom style={{ backgroundColor: "red" }} />
     */
    style?: any;
    /**
     * Determines whether child elements will stack on top of each other during the animation.
     *
     * @default false
     * @example
     * <Zoom stackChildren={true} />
     */
    stackChildren?: boolean;
}
export declare const Zoom: {
    (props: ZoomProps): React.JSX.Element;
    propTypes: {
        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
        childFactory: PropTypes.Requireable<any>;
        className: PropTypes.Requireable<string>;
        direction: PropTypes.Requireable<string>;
        component: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        id: PropTypes.Requireable<string>;
        style: PropTypes.Requireable<any>;
        stackChildren: PropTypes.Requireable<boolean>;
    };
};