Skip to main content

​
Counter

Animated flip-clock style counter that animates from zero to the target amount. Each digit flips individually with a smooth animation effect.

​
Import

import { Counter } from '@adoptaunabuelo/react-components';

​
Props

​
amount
number
required
Target number to count up to (animates from amount-10 or 0)
​
height
number
required
Height in pixels for each digit block
​
width
number
required
Width in pixels for each digit block
​
color
string
Text color for the digits
​
backgroundColor
string
Background color for each digit block
​
borderColor
string
Border/divider color between digit segments
​
fontSize
number
Font size in pixels for the numbers

​
Usage

<Counter
  amount={12345}
  height={60}
  width={40}
  fontSize={32}
/>

​
Notes

  • Animation starts from amount - 10 (or 0 if amount < 10)
  • Each digit flips independently at 400ms intervals
  • Uses CSS custom properties for styling
  • Animation automatically stops when target is reached
  • Displays leading zeros to maintain consistent width
  • Re-triggers animation when amount prop changes

Build docs developers (and LLMs) love

Get started for freeTalk to us