react-odometerjs
react-odometerjs copied to clipboard
bezenson
Odometer.js React Component
trafficstars
React Odometer.js
Simple React wrapper around Odometer.js.
- How to use this library
- Options
- Next.js integration
- Gatsby integration
- Issues
How to use this library
- Install npm package:
npm install --save react-odometerjs
or
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" />;
}
Options
| 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' }} />;
Next.js integration
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} />;
}
Gatsby integration
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} />;
}
Issues
Found an issue? You are welcome here.
bezenson