beekai-oss / react-flip-numbers

🎰 Flip your numbers in 3D

React Flip Numbers

Make number animation looks sexy 👏

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

Install

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" />;
};

API

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

By the makers of BEEKAI

We also make BEEKAI. Build the next-generation forms with modern technology and best in class user experience and accessibility.