silvestreh / react-flip-numbers

🎰 Flip your numbers in 3D

Home Page:https://codesandbox.io/s/exciting-gagarin-xoq9if

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Flip Numbers

Coverage Status npm version npm downloads npm npm

Make number animation looks sexy πŸ‘

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

Install

npm install react-flip-numbers -S

react flip numbers

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

Sponsors

Thank you very much for those kind people with their sponsorship to this project.

@sayav @lemcii @washingtonsoares @lixunn @SamSamskies @peaonunes @wilhelmeek @iwarner @joejknowles @chris-gunawardena @Tymek @Luchanso @vcarel @gragland @tjshipe @krnlde @msutkowski @mlukaszczyk

About

🎰 Flip your numbers in 3D

https://codesandbox.io/s/exciting-gagarin-xoq9if

License:MIT License


Languages

Language:JavaScript 88.7%Language:HTML 8.8%Language:CSS 2.4%