react-flip-numbers

Make number animation looks sexy :clap:

Features:

• Flip your numbers in 3D space
• Super easy to use

Install

$ yarn add react-flip-numbers
or
$ npm install react-flip-numbers -S

Quickstart

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"
        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