Simple React wrapper around Odometer.js.
- Install npm package:
npm install --save react-odometerjsor
yarn add react-odometerjs- Import CSS file in your app
<head>:
<link rel="stylesheet" href="odometer-theme-default.css" />Official themes can be found here.
- Include component in your application:
import React, { useEffect, useState } from 'react';
import Odometer from 'react-odometerjs';
const App = () => {
const [value, setValue] = useState(1234);
useEffect(() => {
const timeoutId = setTimeout(() => setValue(4321), 2000);
return () => {
clearTimeout(timeoutId);
};
}, []);
return <Odometer value={value} format="(.ddd),dd" />;
}| Option | Type | Default | Description |
|---|---|---|---|
animation |
'count' | undefined |
Count is a simpler animation method which just increments the value, use it when you're looking for something more subtle. | |
duration |
number |
2000 |
Change how long the javascript expects the CSS animation to take. |
format |
string |
'(,ddd).dd' |
Change how digit groups are formatted, and how many digits are shown after the decimal point. |
theme |
string |
Specify the theme (if you have more than one theme css file on the page). Will add CSS class .odometer-theme-{prop value} to wrapper div. |
|
value |
number |
Current value. Change it to run animation. |
You can read about options on official website.
Also component can receive any div property.
Example:
// Pass `style` prop
return <Odometer value={1234} style={{ cursor: 'pointer' }} />;Because Odometer.js requires document object, we should load library using
dynamic import, to avoid loading library on server-side.
Example snippet:
import dynamic from 'next/dynamic'
const Odometer = dynamic(import('react-odometerjs'), {
ssr: false,
loading: () => 0
});
const App = () => {
return <Odometer value={1234} />;
}Odometer.js
import Odometer from 'react-odometerjs'
export default Odometer;App.js
import loadable from '@loadable/component'
const Odometer = loadable(() => import('./Odometer'))
const App = () => {
return <Odometer value={1234} />;
}Found an issue? You are welcome here.