React Flip Numbers

Make number animation looks sexy :clap:

• 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.