react-odometerjs
npm i react-odometerjs
Odometer.js React Component
npm i react-odometerjs
React Odometer.js
Simple React wrapper around Odometer.js.
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 Odometer from 'react-odometerjs';
const App = () => {
return <Odometer value={1234} 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.
| Version | Tag | Published |
|---|---|---|
3.1.0 | latest | 2mos ago |
No alternatives found
No tutorials found
Add a tutorialNo dependencies found
Rate & Review
No reviews found
Be the first to rateMenu