Odometer in ReactJS

Question

I'm trying to run the Odometer, but it is not running in my JSX file. Am I following something wrong ? I can only see static numbers.

Landing.jsx:

import Odometer from 'react-odometerjs';
.
.
.
<div className="counter">
<div className="number odometer" id="datasources">
<Odometer value={11} format="(,ddd)"/></div>
<div className="label">underlying datasets</div>
</div>

Answer 1

Try the format as:

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

Answer 2

You need to create a timer that changes the value of the innerHTML of the odometer element. The odometer class uses a MutationObserver to detect the change and update itself.

Answer 3

• You need to put the type of animation. for example

<Odometer value={11} format="(,ddd)" animation="count"/>

• Don't forget to import the css file in your app .

https://raw.githubusercontent.com/HubSpot/odometer/master/themes/odometer-theme-default.css