Digit-roll-test NPM

digit-roll-react

Rolling digit/odometer effect by React

1. How to use

# install dependencies
npm install digit-roll-react

import React, { Component } from 'react'
import DigitRoll from 'digit-roll-react'
import 'digit-roll-react/css/default.css'

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

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

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

/* 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'

odometer digit react number reactjs display

@infinitebrahmanuniverse/nolb-dig @everything-registry/sub-chunk-1480 @zalastax/nolb-dig

1.0.0

8 years ago