react-strp-counter

A high-performance, CSS-only animated counter for React that never re-renders on value updates.

Ideal for dashboards, KPIs, and animated counters where performance and visual smoothness matter.

_LIGHT Package Size:_


$3

---

✨ Features

- ⚡ Zero re-renders — DOM is fully static after mount
- 🔁 2 modes:
- Static: Only changed digits animate
- Rolling: Seamless jackpot-style rolling using duplicated digit strings
- 🧩 Accepts numbers or formatted strings
- 🏷 Optional unit label with positioning
- 🧠 Ripple-style animation with dynamic delay per digit

---

How It Works

This component avoids React re-renders by offloading all animation logic to CSS variables and direct DOM manipulation.
Every digit is pre-rendered via CSS content (:before) and animated with transform.

In rolling mode, digits animate smoothly from their current index to index + 10 (which wraps visually), and snap back
after the transition ends.

---

📦 Installation

``bash
npm install react-strp-counter
`

or

`bash
yarn add react-strp-counter
`

---

🚀 Usage

`tsx
// import STRPCounter
import {STRPCounter} from 'react-strp-counter';
// import CSS
import 'react-strp-counter/css';

value={1234567.89} // REQUIRED
fontSize="48px" // optional
minLength={9} // optional
delimiter="," // optional
decimalSeparator="." // optional
unitLabel="USD" // optional
unitLabelPosition="left" // optional
rollingMode={true} // optional
stepDuration={0.05} // optional
easing={"cubic-bezier(0.33,0.81,0.1,1.02)"} // optional
/>
`

---

🧩 Props

| Prop | Type | Required | Default | Description |
|---------------------|-----------------------------|----------|-----------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| value | number \| string | ✅ | — | The numeric value or formatted string to render |
| fontSize | string | ❌ | "28px" | Font size (used as --strp_fontsize CSS variable) |
| minLength | number | ❌ | — | Pad with zeroes on the left to reach minimum character length, used to avoid layout shifts when your number has to add a digit from the left side, optional, but I highly suggest to always use this |
| rollingMode | boolean | ❌ | false | If true, enables jackpot-style rolling animation |
| stepDuration | number | ❌ | 0.05 | Optional, used with rollingMode, Per-digit step duration (in seconds) used for timing delays |
| delimiter | string \| false | ❌ | false | Thousands delimiter (e.g. ",", " ") |
| decimalSeparator | string \| false | ❌ | false | Decimal point (e.g. "."), always add 2 decimals if you use this |
| unitLabel | string \| React.ReactNode | ❌ | — | Optional unit (e.g. "$", "kg", "