3 React Counters
This “React Counters” collection is a practical guide to creating various types of counters in React. The examples demonstrate how to use hooks and custom hooks to encapsulate logic, how to correctly work with intervals and timeouts (setInterval, setTimeout) to create timers, and how to integrate animations. Both simple incremental counters and more advanced variations are presented here: countdowns or animated counters for showcases. This is a relevant set of practical solutions that will be useful in any project.
Examples
Odometer Number Counter
This is an Odometer Number Counter. It visualizes numerical changes (such as MRR, follower counts, or revenue) using a mechanical rolling effect. Its function is to provide a highly configurable, tactile alternative to instant number swapping, bringing physical momentum to digital dashboards. (Requires: React, ReactDOM, dat.gui)
Chrome 90+
Edge 90+
Firefox 88+
Safari 15+
See the Pen Odometer Number Counter.
GitHub Stargazers Counter (React)
A customizable React component that fetches live GitHub star counts via the API hook useEffect. It features a smooth loading transition: a spinning star icon expands into a count badge using CSS max-width and transform animations upon data retrieval, supported by SCSS-based light/dark theming.
See the Pen GitHub Stargazers Counter (React).
React Number Range Slider with GSAP
This demo is an animated counter built with React and GSAP that synchronizes a range slider with a smooth, scrolling digit display. This approach makes value manipulation both intuitive and visually appealing.
See the Pen React Number Range Slider with GSAP.