{"library":"react-odometerjs","title":"React Odometer.js","description":"React Odometer.js is a wrapper component that integrates the Odometer.js library into React applications, providing animated numerical counters. The current stable version is 3.1.3. While it doesn't follow a strict release cadence, updates appear to coincide with significant React API changes or new features, such as the adoption of hooks in v3.0.0 for React 16.8+. Its primary differentiator is simplifying the use of Odometer.js within a React ecosystem, abstracting away direct DOM manipulation typically required by the underlying library. It ships with TypeScript types, enhancing developer experience and type safety. A key aspect of its usage is managing server-side rendering (SSR) environments like Next.js or Gatsby, where dynamic imports are necessary to prevent issues with Odometer.js's reliance on the browser's `document` object.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-odometerjs"],"cli":null},"imports":["import Odometer from 'react-odometerjs';","(Use ESM import)","import type { OdometerProps } from 'react-odometerjs';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useEffect, useState } from 'react';\nimport Odometer from 'react-odometerjs';\n// To use themes, you must install the original 'odometer' package:\n// npm install odometer\n// Then, import the desired theme's CSS file. Example for default theme:\nimport 'odometer/themes/odometer-theme-default.css';\n\nconst OdometerExample = () => {\n    const [value, setValue] = useState(1234);\n    const [isMounted, setIsMounted] = useState(false); // State to ensure Odometer is mounted on client-side\n\n    useEffect(() => {\n        // This ensures the Odometer component is only rendered client-side,\n        // which is crucial for Odometer.js as it relies on the 'document' object.\n        // For SSR frameworks, more robust dynamic imports are needed (see warnings).\n        setIsMounted(true);\n\n        const timeoutId = setTimeout(() => setValue(4321), 2000);\n        return () => {\n            clearTimeout(timeoutId);\n        };\n    }, []);\n\n    // Render a placeholder or nothing if not mounted to prevent SSR issues\n    if (!isMounted) {\n        return <div>Loading counter...</div>;\n    }\n\n    return (\n        <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>\n            <h1>Animated Counter Example</h1>\n            <p>Watch the number change after 2 seconds:</p>\n            <Odometer\n                value={value}\n                format=\"(.ddd),dd\" // Example format: thousands separator and two decimal places (not shown here as value is integer)\n                theme=\"default\"    // Corresponds to 'odometer-theme-default.css'\n                animation=\"count\"  // Simple counting animation\n                duration={1500}    // Animation duration in milliseconds\n                style={{ fontSize: '4em', fontWeight: 'bold', color: '#007bff' }}\n            />\n            <p style={{ marginTop: '20px' }}>Current value: {value}</p>\n        </div>\n    );\n};\n\nexport default OdometerExample;","lang":"typescript","description":"This example demonstrates how to integrate `react-odometerjs` into a React component, updating its value after a delay to show the animation. It also highlights basic styling and essential CSS theme import requirements.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}