# flip-counter-js

> This project creates a configurable flip counter using CSS3 animations.

Latest version **1.0.8** (published 2018-02-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install flip-counter-js
pnpm add flip-counter-js
yarn add flip-counter-js
bun add flip-counter-js
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2018-02-22 |
| First published | 2018-02-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 127.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Brian Zhang |
| Maintainers | ashley_lyf, brianfounder |

## Links

- npm: https://www.npmjs.com/package/flip-counter-js
- Repository: https://github.com/BrianJZhang/flip-counter
- Homepage: https://github.com/BrianJZhang/flip-counter#readme
- Issues: https://github.com/BrianJZhang/flip-counter/issues
- npm.io page: https://npm.io/package/flip-counter-js

## Recent versions

- 1.0.8 (latest) — 2018-02-22
- 1.0.7 — 2018-02-22
- 1.0.6 — 2018-02-21
- 1.0.5 — 2018-02-20
- 1.0.4 — 2018-02-19
- 1.0.3 — 2018-02-19
- 1.0.2 — 2018-02-19
- 1.0.1 — 2018-02-19
- 1.0.0 — 2018-02-19

## README

# flip-counter [![NPM version](https://img.shields.io/npm/v/flip-counter-js.svg)](https://www.npmjs.com/package/flip-counter-js)

> This is a Flip Counter component with CSS3 animation style. It can be extended to use as a timer, countdown or else that can be represented with digits. 
[demo](https://brianjzhang.github.io/flip-counter/dist/index.html)

## Installation

``` bash
 npm install flip-counter-js --save
```

## Usage
1. Create an element, e.g. `<div>` in your HTML template and set `data-flip-counter-js` attribute on this element. Refer to the options and configure it as required.
    ``` html
    <div data-flip-counter-js data-fc-size="lg" data-fc-step="11" data-fc-speed="500"
             data-fc-minDigits="10"
             data-fc-start="10"></div>
    ```
2. Import `FlipCounterJs` module. The JavaScript file is generated by Webpack and it supports both CommonJs and AMD.
    ``` javascript
    import FlipCounter from 'flip-counter-js';
    ```
    Else you can find it on global `window` object.
    ``` javascript
    <script src="node_modules/flip-counter-js/dist/flip-counter-js.js"></script>
    ```    
3. Finally don't forget to include the css style.
    ``` html
    <link rel="stylesheet" type="text/css" href="./node_modules/flip-counter-js/dist/css/style.min.css"/>
    ```  
4. There is another way to create an instance using JavaScript API:
    ``` javascript
        var fc = new FlipCounterJs(document.getElementById('fcElement',{
            speed: 0
        });
        
        fc.increment(10); // Add 10
    ```
## Options

Property|Type|Default|Description
---|---|---|---
step|Number|1|The amount by which the value increases every time. 
speed|Number|0|The rate at which the value increases. Unit is _milliseconds_. Minimum value is _500_. If the value is 0, the counter won't increment/decrement automatically.
minDigits|Number|4|The minimum number of digits to show. You may expect leading zeros.
start|Number|0|The initial value.
size|String|'sm'|Possible values: `xs`, `sm`, `md`, `lg`.
mode|String|'up'|Possible values: `up` or `down`. Set mode as `up` to count up, or `down` to count down.

---
_Source: https://npm.io/package/flip-counter-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._