react-fast-marquee-shadow-dom/dist/index.d.ts

A lightweight React component that utilizes the power of CSS animations to create silky smooth marquees.

import { CSSProperties, ReactNode, RefAttributes, FC } from 'react';

declare type MarqueeProps = {
    /**
     * @description Inline style for the container div
     * @type {CSSProperties}
     * @default {}
     */
    style?: CSSProperties;
    /**
     * @description Class name to style the container div
     * @type {string}
     * @default ""
     */
    className?: string;
    /**
     * @description Whether to automatically fill blank space in the marquee with copies of the children or not
     * @type {boolean}
     * @default false
     */
    autoFill?: boolean;
    /**
     * @description Whether to play or pause the marquee
     * @type {boolean}
     * @default true
     */
    play?: boolean;
    /**
     * @description Whether to pause the marquee when hovered
     * @type {boolean}
     * @default false
     */
    pauseOnHover?: boolean;
    /**
     * @description Whether to pause the marquee when clicked
     * @type {boolean}
     * @default false
     */
    pauseOnClick?: boolean;
    /**
     * @description The direction the marquee is sliding
     * @type {"left" | "right" | "up" | "down"}
     * @default "left"
     */
    direction?: "left" | "right" | "up" | "down";
    /**
     * @description Speed calculated as pixels/second
     * @type {number}
     * @default 50
     */
    speed?: number;
    /**
     * @description Duration to delay the animation after render, in seconds
     * @type {number}
     * @default 0
     */
    delay?: number;
    /**
     * @description The number of times the marquee should loop, 0 is equivalent to infinite
     * @type {number}
     * @default 0
     */
    loop?: number;
    /**
     * @description Whether to show the gradient or not
     * @type {boolean}
     * @default false
     */
    gradient?: boolean;
    /**
     * @description The color of the gradient
     * @type {string}
     * @default "white"
     */
    gradientColor?: string;
    /**
     * @description The width of the gradient on either side
     * @type {number | string}
     * @default 200
     */
    gradientWidth?: number | string;
    /**
     * @description A callback for when the marquee finishes scrolling and stops. Only calls if loop is non-zero.
     * @type {() => void}
     * @default null
     */
    onFinish?: () => void;
    /**
     * @description A callback for when the marquee finishes a loop. Does not call if maximum loops are reached (use onFinish instead).
     * @type {() => void}
     * @default null
     */
    onCycleComplete?: () => void;
    /**
     * @description: A callback function that is invoked once the marquee has finished mounting. It can be utilized to recalculate the page size, if necessary.
     * @type {() => void}
     * @default null
     */
    onMount?: () => void;
    /**
     * @description The children rendered inside the marquee
     * @type {ReactNode}
     * @default null
     */
    children?: ReactNode;
} & RefAttributes<HTMLDivElement>;
declare function Marquee({ style, className, autoFill, play, pauseOnHover, pauseOnClick, direction, speed, delay, loop, gradient, gradientColor, gradientWidth, onFinish, onCycleComplete, onMount, children, }: {
    style?: {} | undefined;
    className?: string | undefined;
    autoFill?: boolean | undefined;
    play?: boolean | undefined;
    pauseOnHover?: boolean | undefined;
    pauseOnClick?: boolean | undefined;
    direction?: string | undefined;
    speed?: number | undefined;
    delay?: number | undefined;
    loop?: number | undefined;
    gradient?: boolean | undefined;
    gradientColor?: string | undefined;
    gradientWidth?: number | undefined;
    onFinish: any;
    onCycleComplete: any;
    onMount: any;
    children: any;
}): FC<MarqueeProps>;

export { Marquee as default };
export type { MarqueeProps };