Make number animation looks sexy 👏
- Flip your numbers in 3D space
- Super easy to use
npm install react-flip-numbers -S
import react from 'react';
import FlipNumbers from 'react-flip-numbers';
export default () => {
return <FlipNumbers height={12} width={12} color="red" background="white" play perspective={100} numbers="12345" />;
};
Prop | Type | Required | Description |
---|---|---|---|
numbers |
string | ✓ | |
play |
boolean | ✓ | Start the animation |
height |
number | ✓ | Individual number height |
width |
number | ✓ | Individual number width |
color |
string | ✓ | Number color |
background |
string | Background color | |
perspective |
number | CSS 3D transition perspective | |
nonNumberStyle |
string | CSS inline style for not number eg , : . | |
numberStyle |
string | CSS inline style for number | |
duration |
number | ||
delay |
number |
We also make BEEKAI. Build the next-generation forms with modern technology and best in class user experience and accessibility.