digit-roll-react v1.1.0

digit-roll-react

Rolling digit/odometer effect by React

DEMO: codesandbox

1. How to use

# install dependencies
npm install digit-roll-react

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

2. Prop Types

3. Style it

Access the full power of CSS to customize the component to your liking.

/* index.css */
.DigitRoll {
  font-size: 25px;
  color: white;
  border: none;
}

.DigitRoll__Cell {
  background: salmon;
  margin: 0 3px;
  border: 1px solid brown;
}

.DigitRoll__Divider {
  font-size: 25px;
  color: black;
  padding: 0 6px;
}

Then import it after the default css file.

import 'digit-roll-react/css/default.css'
import './index.css'