@sevenschan/react-count-to

It's a react component that will count to a target number at a specified duration

Usage no npm install needed!

<script type="module">
  import sevenschanReactCountTo from 'https://cdn.skypack.dev/@sevenschan/react-count-to';
</script>

README

React-countTo

It's a react component that will count to a target number at a specified duration

react license npm npm minified gzip

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