superhos/react-countTo

It's a React component that used to count to a target number at a specified duration. 数值变动效果React插件 | 倒数效果 | 价格变动效果.

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-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

Events

Event Name	Description
onDone	when animation is done will callback