react flip your numbers

Usage no npm install needed!

<script type="module">
  import reactFlipNumbers from '';


React Flip Numbers

Coverage Status npm version npm downloads npm npm

Make number animation looks sexy :clap:

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


npm install react-flip-numbers -S

react flip numbers


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


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