@szum-tech/design-system/dist/components/counting-number/index.d.cts

Szum-Tech design system with tailwindcss support

import * as React from 'react';
import { UseInViewOptions } from 'motion/react';

type CountingNumberProps = {
    /**
     * Starting number for the animation
     * @default 0
     */
    from?: number;
    /**
     * Target number to animate to
     * @default 100
     */
    to?: number;
    /**
     * Animation duration in seconds
     * @default 2
     */
    duration?: number;
    /**
     * Delay before starting animation in milliseconds
     * @default 0
     */
    delay?: number;
    /**
     * Custom className for styling
     */
    className?: string;
    /**
     * Whether to start animation when component enters viewport
     * @default true
     */
    startOnView?: boolean;
    /**
     * Whether to animate only once when entering viewport
     * @default false
     */
    once?: boolean;
    /**
     * Margin for in-view detection (rootMargin)
     */
    inViewMargin?: UseInViewOptions["margin"];
    /**
     * Callback fired when animation completes
     */
    onComplete?: () => void;
    /**
     * Custom formatter function for the displayed value.
     * If not provided, the value is rounded to the nearest integer.
     * @example (value) => value.toFixed(2)
     * @example (value) => `$${value.toLocaleString()}`
     */
    format?: (value: number) => string;
};
declare function CountingNumber({ from, to, duration, delay, className, startOnView, once, inViewMargin, onComplete, format, ...props }: CountingNumberProps): React.JSX.Element;

export { CountingNumber, type CountingNumberProps };