ro
react-odometerjs
npm i react-odometerjs
ro

react-odometerjs

Odometer.js React Component

by Vladislav Bezenson

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

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

or

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

Options

OptionTypeDefaultDescription
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.

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

Issues

Found an issue? You are welcome here.

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

Rate & Review

100
No reviews found
Be the first to rate