Make number animation looks sexy 👏
Features:
- Flip your numbers in 3D space
- Super easy to use
Install
$ yarn add react-flip-numbers
or
$ npm install react-flip-numbers -S
Quick start
import react from 'react';
import FlipNumbers from 'react-flip-numbers';
export default () => {
return <FlipNumbers
height="12px"
width="12px"
color="red"
background="white"
play
numbers="12345"
numberStyle={{ color: "black" }}
/>;
}
API
Prop | Type | Required | Description |
---|---|---|---|
numbers |
string | ✓ | |
nonNumberStyle |
string | Css inline style for not number eg , : . | |
numberStyle |
string | Css inline style for number | |
height |
number | ✓ | Individual number height |
width |
number | ✓ | Individual number width |
color |
string | ✓ | Number color |
background |
string | ✓ | Background color |
perspective |
number | Css 3D transition perspective | |
durationSeconds |
number | ||
delaySeconds |
number | ||
play |
boolean | ✓ | Start the animation |