react-flip-numberss

react flip your numbers

Usage no npm install needed!

<script type="module">
  import reactFlipNumberss from 'https://cdn.skypack.dev/react-flip-numberss';
</script>

README

npm version npm downloads npm npm

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

Flip your number

Quick start

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

export default () => {
    return <FlipNumbers
        height="12px"
        width="12px"
        color="red"
        background="white"
        play
        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