CountUp
Counts to a number when it scrolls into view.
import
import { CountUp } from '@joshicodes/cock';Numbers
Eggs since March
12,840
Mornings he was on time
99.95%
Behaviour
- After the first run it animates from the old value to the new one.
- Skips straight to the final state when the visitor has reduced motion turned on.
- Screen readers get the finished text, not the animation.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of CountUp
| Prop | Type | Default |
|---|---|---|
value required | number | — |
duration Milliseconds per run. | number | 1200 |
decimals | number | 0 |
locale | string | — |
format Custom formatting; overrides `decimals` and `locale`. | (value: number) => string | — |
prefix | string | '' |
suffix | string | '' |
startOnView Wait until the number scrolls into view before counting. | boolean | true |
class | string | — |