Rolling Counter React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import RollingCounter from "./RollingCounter";

export default function Example() {
  return (
    <RollingCounter
      value={12840}
      decimals={0}
      separator={","}
      decimalSeparator={"."}
      prefix={""}
      suffix={""}
      duration={900}
    />
  );
}

Using Rolling Counter

Pass the numeric value directly and set decimals for its precision. prefix and suffix can provide a currency symbol or unit.

Use separator and decimalSeparator for the desired number formatting. Keep the formatted value narrow enough for the available layout.

Props

Name	Type	Required	Default	Description
value	number	No	0	The number to display. Non-finite numbers display zero.
decimals	number	No	0	Decimal places, clamped from 0 to 6.
separator	string	No	","	Thousands separator. Use an empty string to disable grouping.
decimalSeparator	string	No	"."	Character between the integer and fraction.
prefix	string	No	""	Text before the number.
suffix	string	No	""	Text after the number.
duration	number	No	900	Digit transition duration in milliseconds.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.