It's a React component that us
React-countTo
Events
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-to Example
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 |
| Event Name | Description |
|---|---|
| onDone | when animation is done will callback |
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
