Description:
A fancy React animation library to flip numbers in 3D space.
Installation:
# NPM $ npm install react-flip-numbers --save
How to use it:
1. Import the component.
import react from 'react'; import FlipNumbers from 'react-flip-numbers';
2. Create a basic flip animation.
export default () => {
return <FlipNumbers
play
color="#fff"
background="#333333"
width={50}
height={50}
numbers={12345}
/>;
};3. All possible props to config the flip animation.
defaultProps = {
// CSS 3D transition perspective
perspective: 500,
// duration in seconds
duration: 0.3,
// height & width of the flip animation
height: number,
width: number,
// text color
color: string,
// background color
background?: string,
// start the animation on init
play: false,
// time to wait before starting the animation
delay: 0,
// additional styles
nonNumberStyle: {},
numberStyle: {},
};Preview:
