@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
42 lines • 1.89 kB
TypeScript
import { type SpringOptions, type UseInViewOptions } from "motion/react";
import * as React from "react";
/** Props accepted by {@link CountingNumber}. */
export interface CountingNumberProps extends React.HTMLAttributes<HTMLSpanElement> {
/** Final numeric value to animate toward. @default undefined */
number: number;
/** Initial numeric value used before the spring animation starts. @default 0 */
fromNumber?: number;
/** Pads the integer portion so it matches the target value width. @default false */
padStart?: boolean;
/** Delays the animation until the element enters the viewport. @default false */
inView?: boolean;
/** Margin passed to the in-view observer when `inView` is enabled. @default "0px" */
inViewMargin?: UseInViewOptions["margin"];
/** Prevents the in-view animation from replaying after the first reveal. @default true */
inViewOnce?: boolean;
/** Character used between the integer and decimal portions. @default "." */
decimalSeparator?: string;
/** Spring physics applied to the counting animation. @default {stiffness: 90, damping: 50} */
transition?: SpringOptions;
/** Number of decimal places rendered during the animation. @default 0 */
decimalPlaces?: number;
}
/**
* Animates a number value with a spring and writes the formatted value into a span.
*
* @remarks
* - Animated component using the `motion` library
* - Renders a `<span>` element
* - Styling via CSS Modules with `--ac-*` custom properties
* - Client-side only (`"use client"` directive)
*
* @example
* ```tsx
* <CountingNumber number={1250} />
* ```
*
* @see {@link CountingNumberProps} for available props
*/
declare const CountingNumber: React.ForwardRefExoticComponent<CountingNumberProps & React.RefAttributes<HTMLSpanElement>>;
export { CountingNumber };
//# sourceMappingURL=counting-number.d.ts.map