Let your data values load and move!
describe:
Digital beating components!
The CountUp component is used to display the animation effect of a number gradually increasing to a specific value within a certain period of time. It can be used in web pages or applications to present users with a dynamic data change experience.
1. Import components
npm install react-countup 2. Introduction to component configuration
| parameter |
illustrate |
type |
default value |
Remark |
| className |
Component class name |
String |
-- |
-- |
| decimal |
decimal separator |
String |
Period (half-width) |
-- |
| decimals |
decimal precision |
Number |
0 |
rounding |
| delay |
Delay before animation loads |
Number |
5 |
The unit is seconds\S. When encapsulating and using it in batches, please pay attention to adding the key value, otherwise the delay effects will overwrite each other. |
| duration |
animation duration |
Number |
2 |
Unit seconds\S |
| end |
Animation loading end value |
Number |
-- |
end is the beating value. Represents the value of the final animation freeze frame |
| prefix |
Numeric prefix |
String |
-- |
-- |
| redraw |
Whether to redraw the animation when updating |
Boolean |
false |
-- |
| preserveValue |
After the digital animation ends, if necessary update whether to retain the final value and continue updating |
Boolean |
false |
-- |
| separator |
thousands separator |
String |
Comma (half-width) |
-- |
| start |
Animation loading initial value |
Number |
0 |
-- |
| suffix |
Numeric suffix |
String |
-- |
-- |
| useEasing |
Whether to enable the easing effect |
Boolean |
true |
-- |
| useGrouping |
Whether to enable group separator |
Boolean |
true |
-- |
| useIndianSeparators |
Whether to enable Indian digit separator |
Boolean |
true |
-- |
| easingFn |
Specify a custom easing function |
Function |
easeInExpo |
-- |
| formattingFn |
Custom numerical format |
Function |
-- |
(value)=>void |
| enableScrollSpy |
Whether to start animation loading when the component appears in the field of view |
Boolean |
false |
This is used when the page is very large. When scrolling up and down, the visible and hidden state of the component in the page view is used. Whether to load the jumping animation when the state changes. |
| scrollSpyDelay |
Animation loading is delayed after appearing in view |
Number |
0 |
-- |
| scrollSpyOnce |
Whether to load only once |
Boolean |
-- |
-- |
| onEnd |
Animation loading end callback method |
Function |
-- |
|
| onStart |
Animation start callback method |
Function |
-- |
|
| onPauseResume |
Temporary or recovery callbacks |
Function |
-- |
|
| onReset |
callback on reset |
Function |
-- |
|
| onUpdate |
Callback when data is updated |
Function |
-- |
|
| Component instance methods |
||||
| reset |
reset initial value |
Function |
-- |
|
| start |
Start animation loading |
Function |
-- |
|
| update |
Update to latest value |
Function |
-- |
|
| breakResume |
stop animation |
Function |
-- |
|
| countUpRef |
The hook function obtains the properties of Countup |
Function |
-- |
|
3. Simple use of components, practical effects
Complete code:
import CountUp from 'react-countup';
const China = () => {
return (
<>
<div style={
{ fontSize: '32px' }}>
// 组件使用
<CountUp
key={1000}
// 动画结束值
end={9597000}
// 保留一位小数
decimals={1}
// 动画持续时间
duration={3}
// 动画延迟时间
delay={1}
// 千位分隔符
separator=','
// 数据初始值
start={0}
// 数据前缀
prefix='中华人民共和国国土面积：'
// 数据后缀
suffix='平方公里'
// 动画结束回调
onEnd={() => {
console.log('动画结束');
}}
// 动画开始回调
onStart={() => {
console.log('动画开始');
}}
/>
</div>
</>
);
};
export default China;4. Advanced use of countUpRef function to configure CountUp instance method
It seems that this component currently does not support ref, so you have to use countUpRef to use the instance method of this component. Here is a simple example of how to use this instance.
import { useRef } from 'react';
import CountUp, { useCountUp } from 'react-countup';
const CountUpRef = () => {
// 定义实例
const countUpRefs: any = useRef();
// 定义 重置动画方法和重置初始值方法
const { start, reset } = useCountUp({
// 结束值
end: 20,
// 前缀
prefix: '今日温度：',
// 后缀
suffix: '°C',
// 动画持续时间
duration: 3,
// 绑定标签
ref: countUpRefs,
onEnd: ({ pauseResume, reset, start, update }) => {
console.log('加载结束');
}
});
return (
<>
// 绑定 CountUp 给div
<div style={
{ fontSize: '32px' }} ref={countUpRefs}></div>
// 配置方法
<div>
<button onClick={() => { start();}}>
重置动画
</button>
<button style={
{margin:'0 10px'}} onClick={() => {reset();}} >
重置为 0
</button>
</div>
</>
);
};
export default CountUpRef;Rendering: