@gfazioli/mantine-text-animate/dist/types/RotatingText/use-rotating-text.d.ts

The TextAnimate component allows you to animate text with various effects.

export interface RotatingTextBaseProps {
    /**
     * Array of text strings to rotate through
     */
    values: string[];
    /**
     * Whether the rotation animation is active
     * @default true
     */
    animate?: boolean;
    /**
     * Time in milliseconds each text stays visible before rotating
     * @default 3000
     */
    interval?: number;
    /**
     * Animation speed multiplier (higher = faster transition)
     * @default 1
     */
    speed?: number;
    /**
     * Callback fired when the text rotates to a new index
     */
    onCycle?: (index: number) => void;
}
export interface UseRotatingTextResult {
    /** Index of the currently displayed text */
    currentIndex: number;
    /** The currently displayed text */
    currentText: string;
    /** Index of the next text to display */
    nextIndex: number;
    /** The next text to display */
    nextText: string;
    /** Whether a transition animation is in progress */
    isTransitioning: boolean;
    /** Callback to attach to the entering element's onAnimationEnd */
    onTransitionEnd: () => void;
    /** Start the rotation */
    start: () => void;
    /** Stop the rotation */
    stop: () => void;
    /** Reset to the first text */
    reset: () => void;
}
/**
 * A hook that creates a rotating text effect, cycling through an array of strings
 */
export declare function useRotatingText(options: RotatingTextBaseProps): UseRotatingTextResult;