Skip to content

React Odometer

An odometer effect used for number and balance transitions.

npm |  source

Usage

Odeometer is a component that can be used to display numbers and balances. It has a smooth animation when its value changes, and adopts a 2-tone design for whole and decimal figures.

Comma formatted numbers and decimals are supported.

Install

First, we will install @w3ux/react-odometer as a dependency in our project.

npm
npm i @w3ux/react-odometer

Import

Odometer is wrapped in a span element, but it is recommended to embed it within a header or paragraph tag so it inherits font size, line height and text styling.

import { Odometer } from '@w3ux/react-odometer';
 
...
 
<h1>
  <Odometer value="1,2019,03.456789" />
</h1>