Flip Numbers In 3D Space – react-flip-numbers

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:

Flip Numbers In 3D Space - react-flip-numbers

Tags:

Add Comment