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
| durationSeconds | number | | | | delaySeconds | number | | |