React-odometerjs NPM

React Odometer.js

Simple React wrapper around Odometer.js.

Preview

How to use this library

Install npm package:

npm install --save react-odometerjs

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