CountUp

Animates a number up to a target value when the element enters the viewport.

2500000984200

Usage

import { CountUp } from '@bwo-ui/react';

<CountUp to={2_500_000} duration={2} />
<CountUp to={98} suffix="%" duration={1.6} />
<CountUp to={4200} prefix="$" separator="," />

Props

Prop	Type	Default	Description
`to`	`number`	—	End value.
`from`	`number`	`0`	Start value.
`duration`	`number`	`2`	Seconds.
`decimals`	`number`	`0`	Decimal places.
`separator`	`string`	`','`	Thousands separator.
`decimal`	`string`	`'.'`	Decimal separator.
`prefix`	`string`	—	Prepended (e.g. "$").
`suffix`	`string`	—	Appended (e.g. "%").
`start`	`string`	`'top 85%'`	ScrollTrigger start.
`once`	`boolean`	`true`	Play only once.