https://github.com/MicheleBertoli/react-count-to

Animated counter component for React.js
https://github.com/MicheleBertoli/react-count-to

Last synced: 4 months ago
JSON representation

Animated counter component for React.js

• Host: GitHub
• URL: https://github.com/MicheleBertoli/react-count-to
• Owner: MicheleBertoli
• License: mit
• Created: 2015-04-22T21:52:28.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T04:50:17.000Z (about 2 years ago)
• Last Synced: 2024-08-07T17:24:10.623Z (4 months ago)
• Language: Dockerfile
• Homepage: http://react-count-to.herokuapp.com
• Size: 976 KB
• Stars: 62
• Watchers: 4
• Forks: 14
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Build Status](https://travis-ci.org/MicheleBertoli/react-count-to.svg?branch=master)](https://travis-ci.org/MicheleBertoli/react-count-to)

React Count To

==============

Animated counter  component for [React.js](http://facebook.github.io/react/)

Installation

------------

```sh

$ npm install react-count-to --save

```

Demo

----

**Live**

[http://react-count-to.herokuapp.com](http://react-count-to.herokuapp.com)

**Docker** (thanks to [Cirpo](https://github.com/cirpo))

- `docker build -t react-count-to .`

- `docker run -p 3000:3000 -it react-count-to`

- connect to [http://localhost:3000](http://localhost:3000) and enjoy

Usage

-----

```javascript

import CountTo from 'react-count-to';

```

or by passing function as a children

 

```javascript

import CountTo from 'react-count-to';

const fn = value => {value};

{fn}

```

Attributes

----------

- **from** (optional): Counting from (default: 0).

- **to**: Counting to.

- **speed**: Duration (in milliseconds).

- **delay** (optional): Delay (in milliseconds) between each refresh (default: 100).

- **onComplete** (optional): A callback triggered when counting is done.

- **digits** (optional): The number of digits to appear after the decimal point (default: 0).

- **className** (optional): HTML class attribute for counter element.

- **tagName** (optional): Element name that will be displayed (default: 'span').

- **children** (optional): Function invoked on every update with value as parameter. Must return valid React element or null.

- **easing** (optional): Function returning easing value based on input progress value from 0.0 to 1.0 (default: identity function).

Test

----

```sh

$ npm test

```