digit-roll-react

simple yet fully customizable rolling digits/odometer effect for react

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
digit-roll-react
1.1.05 years ago5 years agoMinified + gzip package size for digit-roll-react in KB

Readme

digit-roll-react
Rolling digit/odometer effect by React
DEMO: codesandbox

  1. How to use

```bash
install dependencies
npm install digit-roll-react ``` ```js import React, { Component } from 'react' import DigitRoll from 'digit-roll-react' class App extends Component { state = { num: 12345678 } //generate random numbers refresh = () => {
this.setState({
num: Math.floor(Math.random() * 100000000),
})
} componentDidMount() {
setInterval(this.refresh, 2500)
} render() {
return <DigitRoll num={this.state.num} length={9} divider="," />
} } export default App ```

  1. Prop Types

| Property | Type | Required? | default | Description | | :-------- | :----- | :-------- | :--------- | :------------------------------------------------------- | | num | Number | ✓ | '000000' | the number you want to render | | length | Number | | auto | length={9} then 123456 => 000123456 | | height | Number | | 3 (rem) | Height of each digit | | width | Number | | 2 (rem) | width of each digit | | divider | String | | no divider | divider=',' then 100000 => 100,000 | | delay | Number | | 2 (s) | how fast digit rolls | | className | String | | '' | Optional custom CSS class name to attach to root element |

  1. Style it

Access the full power of CSS to customize the component to your liking. | className | description | | :-------------------- | :-------------------------- | | .DigitRoll | the root <div>. | | .DigitRoll__Cell | <div> of each digit | | .DigitRoll__Divider | <div> of dividing element | ```css / index.css / .DigitRoll { font-size: 25px; color: white; border: none; } .DigitRollCell { background: salmon; margin: 0 3px; border: 1px solid brown; } .DigitRollDivider { font-size: 25px; color: black; padding: 0 6px; } ``` Then import it after the default css file. ```js import 'digit-roll-react/css/default.css' import './index.css' ```