@gfazioli/mantine-text-animate/dist/types/NumberTicker/use-number-ticker.d.ts

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

/**
 * Available easing functions for the animation
 */
export type NumberTickerEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
/**
 * Base props shared between NumberTicker component and useNumberTicker hook
 */
export interface NumberTickerBaseProps {
    /**
     * The target value to animate to
     */
    value: number;
    /**
     * The initial value to start from
     * @default 0
     */
    startValue?: number;
    /**
     * Delay before starting the animation in seconds
     * @default 0
     */
    delay?: number;
    /**
     * Number of decimal places to display
     * @default 0
     */
    decimalPlaces?: number;
    /**
     * Animation speed multiplier (higher = faster)
     * @default 1
     */
    speed?: number;
    /**
     * Easing function for the animation
     * @default "ease-out"
     */
    easing?: NumberTickerEasing;
    /**
     * Whether the animation should be active
     * @default true
     */
    animate?: boolean;
    /**
     * Callback function called when animation completes
     */
    onCompleted?: () => void;
    /**
     * Custom format function that overrides the default Intl.NumberFormat.
     * When provided, this function is used to format the displayed value.
     * @param value The current numeric value
     * @returns The formatted string representation
     */
    formatValue?: (value: number) => string;
}
/**
 * Hook props interface extending the base props
 */
export interface UseNumberTickerProps extends NumberTickerBaseProps {
}
/**
 * Return value interface for the useNumberTicker hook
 */
export interface UseNumberTickerResult {
    /**
     * The formatted text representation of the current value
     */
    text: string;
    /**
     * The current numeric value (not formatted)
     */
    displayValue: number;
    /**
     * Function to start the animation
     */
    start: () => void;
    /**
     * Function to stop the animation while keeping the current value
     */
    stop: () => void;
    /**
     * Function to reset the animation to the initial value
     */
    reset: () => void;
    /**
     * Whether the animation is currently running
     */
    isAnimating: boolean;
}
/**
 * Hook that provides number ticker animation functionality
 *
 * This hook powers the NumberTicker component and can be used independently
 * for more advanced use cases.
 */
export declare function useNumberTicker({ value, startValue, delay, decimalPlaces, speed, easing, animate, onCompleted, formatValue, }: UseNumberTickerProps): UseNumberTickerResult;