React Count To
Animated counter component for React.js
Installation
$ npm install react-count-to --save
Demo
Live
http://react-count-to.herokuapp.com
Docker (thanks to Cirpo)
docker build -t react-count-to .
docker run -p 3000:3000 -it react-count-to
- connect to http://localhost:3000 and enjoy
Usage
; <CountTo to=1234 speed=1234 />
or by passing function as a children
; const fn = <span>value</span>; <CountTo to=1234 speed=1234>fn</CountTo>
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
$ npm test