digit-roll-react
Rolling digit/odometer effect by React
DEMO: codesandbox
1. How to use
# install dependencies npm install digit-roll-react
state = num: 12345678 //generate random numbers { this } { } { return <DigitRoll num=thisstatenum length=9 divider="," /> }
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 */
Then import it after the default css file.