Package Exports
- react-count-animation
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-count-animation) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-count-animation
Using TWEEN algorithm, digital animation based on react.
Display
Install
npm install react-count-animation@latestHow to use
import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import AnimationCount from 'react-count-animation';
const settings = {
start: 99923,
count: 9999999,
duration: 3000,
decimals: 4,
useGroup: true,
animation: 'up',
}
const settings2 = {
start: 1,
count: 9999999,
duration: 1000,
decimals: 2,
useGroup: true,
animation: 'roll',
}
render(
<div>
<h1 className="title">Count Animation</h1>
<div className="exam-div">
<AnimationCount {...settings}/>
</div>
<h1 className="title">Count Roll</h1>
<div className="exam-div">
<AnimationCount {...settings2}/>
</div>
</div>,
document.getElementById('root')
);Options
| Property | Type | Description |
|---|---|---|
| start | Number | Initial value |
| count | Number | target value |
| duration | Number | Animation time length, in milliseconds |
| decimals | Number | decimals |
| useGroup | bool | Whether to use ',' the number of segments |
| animation | string | Animation effects: 'up' => 'CountUp'; 'roll' => 'CountRoll' 'roll' => 'CountRoll' |