/react-flip-numbers

🎰 Flip your numbers in 3D

Primary LanguageJavaScriptMIT LicenseMIT

npm version npm downloads npm npm

Make number animation looks sexy 👏

Features:

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

Install

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

Flip your number

Quick start

import react from 'react';
import FlipNumbers from 'react-flip-numbers';

export default function SexyComponent(props) {
    return <div>
        <FlipNumbers
            height="12px"
            width="12px"
            color="red"
            background="white"
            startAnimation
            numbers="12345"
            numberStyle={{ color: "black" }}
      />
    </div>;
}

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
startAnimation boolean ✓ Start the animation