react-odometerjs

import React, { useEffect, useState } from 'react'; import Odometer from 'react-odometerjs'; // To use themes, you must install the original 'odometer' package: // npm install odometer // Then, import the desired theme's CSS file. Example for default theme: import 'odometer/themes/odometer-theme-default.css'; const OdometerExample = () => { const [value, setValue] = useState(1234); const [isMounted, setIsMounted] = useState(false); // State to ensure Odometer is mounted on client-side useEffect(() => { // This ensures the Odometer component is only rendered client-side, // which is crucial for Odometer.js as it relies on the 'document' object. // For SSR frameworks, more robust dynamic imports are needed (see warnings). setIsMounted(true); const timeoutId = setTimeout(() => setValue(4321), 2000); return () => { clearTimeout(timeoutId); }; }, []); // Render a placeholder or nothing if not mounted to prevent SSR issues if (!isMounted) { return <div>Loading counter...</div>; } return ( <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}> <h1>Animated Counter Example</h1> <p>Watch the number change after 2 seconds:</p> <Odometer value={value} format="(.ddd),dd" // Example format: thousands separator and two decimal places (not shown here as value is integer) theme="default" // Corresponds to 'odometer-theme-default.css' animation="count" // Simple counting animation duration={1500} // Animation duration in milliseconds style={{ fontSize: '4em', fontWeight: 'bold', color: '#007bff' }} /> <p style={{ marginTop: '20px' }}>Current value: {value}</p> </div> ); }; export default OdometerExample;