https://github.com/beekai-oss/react-flip-numbers

🎰 Flip your numbers in 3D
https://github.com/beekai-oss/react-flip-numbers

animation counter flip number number-counter react reactjs

Last synced: 6 months ago
JSON representation

🎰 Flip your numbers in 3D

• Host: GitHub
• URL: https://github.com/beekai-oss/react-flip-numbers
• Owner: beekai-oss
• License: mit
• Created: 2018-04-29T02:45:30.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-04-06T06:14:24.000Z (over 2 years ago)
• Last Synced: 2024-10-16T20:00:23.728Z (12 months ago)
• Topics: animation, counter, flip, number, number-counter, react, reactjs
• Language: JavaScript
• Homepage: https://codesandbox.io/s/exciting-gagarin-xoq9if
• Size: 1.08 MB
• Stars: 310
• Watchers: 8
• Forks: 30
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
# React Flip Numbers

[![Coverage Status](https://coveralls.io/repos/github/bluebill1049/react-flip-numbers/badge.svg?branch=master)](https://coveralls.io/github/bluebill1049/react-flip-numbers?branch=master)

[![npm version](https://img.shields.io/npm/v/react-flip-numbers.svg?style=flat-square)](https://www.npmjs.com/package/react-flip-numbers)

[![npm downloads](https://img.shields.io/npm/dm/react-flip-numbers.svg?style=flat-square)](https://www.npmjs.com/package/react-flip-numbers)

[![npm](https://img.shields.io/npm/dt/react-flip-numbers.svg?style=flat-square)](https://www.npmjs.com/package/react-flip-numbers)

[![npm](https://badgen.net/bundlephobia/minzip/react-flip-numbers)](https://badgen.net/bundlephobia/minzip/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

```jsx

import react from 'react';

import FlipNumbers from 'react-flip-numbers';

export default () => {

  return ;

};

```

## 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  |          |                                          |

## By the makers of BEEKAI

We also make [BEEKAI](https://www.beekai.com/). Build the next-generation forms with modern technology and best in class user experience and accessibility.