Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bezenson/react-odometerjs
Odometer.js React Component
https://github.com/bezenson/react-odometerjs
component javascript javascript-library odometer react reactjs wrapper wrapper-library yarn
Last synced: 7 days ago
JSON representation
Odometer.js React Component
- Host: GitHub
- URL: https://github.com/bezenson/react-odometerjs
- Owner: bezenson
- License: mit
- Created: 2016-12-16T10:51:06.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-02-01T16:42:09.000Z (11 months ago)
- Last Synced: 2024-10-11T16:14:03.178Z (3 months ago)
- Topics: component, javascript, javascript-library, odometer, react, reactjs, wrapper, wrapper-library, yarn
- Language: TypeScript
- Size: 1.8 MB
- Stars: 62
- Watchers: 1
- Forks: 16
- Open Issues: 4
-
Metadata Files:
- Readme: README.MD
- License: LICENSE.MD
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/react-odometerjs)
[](https://www.npmjs.com/package/react-odometerjs)
# React Odometer.js
Simple React wrapper around [Odometer.js](https://github.com/HubSpot/odometer).
- [How to use this library](#how-to-use-this-library)
- [Options](#options)
- [Next.js integration](#nextjs-integration)
- [Gatsby integration](#gatsby-integration)
- [Issues](#issues)
## How to use this library
1. Install npm package:
```bash
npm install --save react-odometerjs
```
or
```bash
yarn add react-odometerjs
```
2. Import CSS file in your app ``:
```html
```
> Official themes can be found [here](http://github.hubspot.com/odometer/api/themes/).
3. Include component in your application:
```javascript
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 ;
}
```
## 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](http://github.hubspot.com/odometer/).
Also component can receive any `div` property.
Example:
```javascript
// Pass `style` prop
return ;
```
## Next.js integration
Because Odometer.js requires `document` object, we should load library using
[dynamic import](https://github.com/zeit/next.js/#dynamic-import), to avoid loading library on server-side.
Example snippet:
```javascript
import dynamic from 'next/dynamic'
const Odometer = dynamic(import('react-odometerjs'), {
ssr: false,
loading: () => 0
});
const App = () => {
return ;
}
```
## Gatsby integration
`Odometer.js`
```js
import Odometer from 'react-odometerjs'
export default Odometer;
```
`App.js`
```js
import loadable from '@loadable/component'
const Odometer = loadable(() => import('./Odometer'))
const App = () => {
return ;
}
```
## Issues
Found an issue? You are welcome [here](https://github.com/bezenson/react-odometerjs/issues).