1.0.2 • Published 4 years ago
@sevenschan/react-count-to v1.0.2
React-countTo
It's a react component that will count to a target number at a specified duration
Inspire by Vue-countTo.
React-countTo is a easy component for counting to a target number at a specified duration.
Try the demo
How to use?
npm install @sevenschan/react-count-toExample
import { ReactCountTo } from '@sevenschan/react-count-to'
<ReactCountTo className={'demo_1'} ref={'counter'} startVal={1990} endVal={2020} duration={1000}/>Options
| Property | Description | type | default |
|---|---|---|---|
| startVal | the value you want to begin at | Number | 0 |
| endVal | the value you want to arrive at | Number | 2020 |
| duration | duration in millisecond | Number | 3000 |
| autoplay | when mounted autoplay | Boolean | true |
| decimals | the number of decimal places to show | Number | 0 |
| separator | the separator | String | , |
| prefix | the prefix | String | '' |
| suffix | the suffix | String | '' |
| prefixClassName | the prefix's class | String | '' |
| prefixStyle | the prefix's style | String | '' |
| suffixClassName | the suffix's style | String | '' |
| suffixStyle | the suffix's style | String | '' |
| useEasing | is use easing function | Boolean | true |
| easingFn | the easing function | Function | — |
notes: when autoplay:true , it will auto start when startVal or endVal change
Functions
| Function Name | Description |
|---|---|
| start | start the countTo |
| pause | pause the countTo |
| resume | resume to countTo |
| stop | stop the countTo |
| reset | reset the countTo |
Events
| Event Name | Description |
|---|---|
| onDone | when animation is done will callback |