@dxkit-org/react-marquee/dist/index.d.ts

A modern, lightweight React marquee component with TypeScript support. Features customizable animations, fade effects, direction control, and accessibility-friendly scrolling text.

import * as react_jsx_runtime from 'react/jsx-runtime';
import { ReactNode, HTMLAttributes } from 'react';

/**
 * Props for the Marquee component
 *
 * @public
 */
type MarqueeProps = {
    /** Content to display in the marquee animation */
    children: ReactNode;
    /** Direction of the marquee animation */
    direction?: "left" | "right" | "up" | "down";
    /** Whether to reverse the animation direction */
    reverse?: boolean;
    /** Whether to pause the animation when user hovers over the component */
    pauseOnHover?: boolean;
    /** Whether to apply a fade effect at the edges of the marquee */
    fade?: boolean;
    /** Number of copies of the content to create for seamless looping */
    numberOfCopies?: number;
    /** Additional props to pass to the outer container div */
    containerProps?: HTMLAttributes<HTMLDivElement>;
    /** Additional props to pass to the content wrapper div */
    childrenWrapperProps?: HTMLAttributes<HTMLDivElement>;
};
/**
 * A modern, lightweight React marquee component with full TypeScript support.
 *
 * Perfect for creating smooth scrolling animations, news tickers, logo carousels,
 * and any other horizontal or vertical scrolling content in your React applications.
 *
 * Features:
 * - Four-directional scrolling (left, right, up, down)
 * - Fade effects with gradient masks
 * - Pause on hover functionality
 * - Reverse animation direction
 * - Configurable content repetition
 * - Full accessibility support
 * - Zero external dependencies
 * - TypeScript first with complete type definitions
 *
 * @example
 * ```tsx
 * // Basic horizontal marquee (left to right)
 * <Marquee>
 *   <span>Welcome to our amazing React Marquee component!</span>
 * </Marquee>
 *
 * // Right to left horizontal marquee
 * <Marquee direction="right">
 *   <span>This text scrolls from left to right!</span>
 * </Marquee>
 *
 * // Vertical marquee with fade effect and pause on hover
 * <Marquee direction="up" fade pauseOnHover>
 *   <div>Latest news item 1</div>
 *   <div>Latest news item 2</div>
 *   <div>Latest news item 3</div>
 * </Marquee>
 *
 * // Downward vertical marquee
 * <Marquee direction="down" fade>
 *   <div>Scrolling down content</div>
 * </Marquee>
 *
 * // Logo carousel with custom styling
 * <Marquee
 *   direction="left"
 *   pauseOnHover
 *   numberOfCopies={3}
 *   containerProps={{ className: "bg-gray-100 p-4" }}
 * >
 *   <div className="flex items-center gap-8">
 *     <img src="/logo1.png" alt="Company 1" />
 *     <img src="/logo2.png" alt="Company 2" />
 *   </div>
 * </Marquee>
 * ```
 *
 * @param props - Configuration options for the marquee component
 * @returns A React functional component that renders an animated marquee
 *
 * @public
 */
declare function Marquee({ children, direction, pauseOnHover, reverse, fade, numberOfCopies, containerProps, childrenWrapperProps }: MarqueeProps): react_jsx_runtime.JSX.Element;

export { Marquee, type MarqueeProps };