react-odometerjs-liquidapps

React Odometer.js

Simple React wrapper around Odometer.js.

How to use it

1. Installation

npm install --save react-odometerjs

or

yarn add react-odometerjs

1. Include component in your application:

import Odometer from 'react-odometerjs';
// ...
return <Odometer value={1234} format="(.ddd),dd" />;

Don't forget to include styles on your page. Official themes can be found here.

Options

You can pass odometer options via props. See official documentation of Odometer.js to learn about available options.

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
});
// ...
return <Odometer value={1234} format="(.ddd),dd" />;

Issues

Found an issue? You are welcome here.