npm i react-odometerjs


Odometer.js React Component

by Vladislav Bezenson

3.1.0 (see all)License:MITTypeScript:Built-In
npm i react-odometerjs

Latest version Downloads

React Odometer.js

Simple React wrapper around Odometer.js.

How to use this library

  1. Install npm package:
npm install --save react-odometerjs


yarn add react-odometerjs
  1. Import CSS file in your app <head>:
<link rel="stylesheet" href="odometer-theme-default.css" />

Official themes can be found here.

  1. Include component in your application:
import Odometer from 'react-odometerjs';

const App = () => {
    return <Odometer value={1234} format="(.ddd),dd" />;


animation'count' \| undefinedCount is a simpler animation method which just increments the value, use it when you're looking for something more subtle.
durationnumber2000Change how long the javascript expects the CSS animation to take.
formatstring'(,ddd).dd'Change how digit groups are formatted, and how many digits are shown after the decimal point.
themestringSpecify 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.
valuenumberCurrent value. Change it to run animation.

You can read about options on official website.

Also component can receive any div property.


// 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


import Odometer from 'react-odometerjs'

export default Odometer;


import loadable from '@loadable/component'

const Odometer = loadable(() => import('./Odometer'))

const App = () => {
    return <Odometer value={1234} />;


Found an issue? You are welcome here.

No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

No reviews found
Be the first to rate