react-odometerjs

Odometer.js as a React component

Usage no npm install needed!

<script type="module">
  import reactOdometerjs from 'https://cdn.skypack.dev/react-odometerjs';
</script>

README

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

Gatsby

Odometer.js

import Odometer from 'react-odometerjs'
export default Odometer

App.js

import loadable from '@loadable/component'

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

...

<Odometer value={1234} />

Issues

Found an issue? You are welcome here.