npm install count-up-react
npm install count-up-react --save
or
yarn add count-up-react
`
2:引入
`
import { Countup } from 'count-up-react'
`
3:使用
`
const App = () => {
const [number, setNumber] = useState(1234.5);
const [symbol, setSymbol] = useState(",");
const [itemHeight, setItemHeight] = useState(40);
const [scrollTime, setScrollTime] = useState(1000);
const [className, setClassName] = useState("my-class");
const [initStatus, setInitStatus] = useState(true);
useEffect(() => {
setTimeout(() => {
setNumber(9176429);
}, 3000);
}, []);
return (
默认
千位分割
自定义
className={className}
itemHeight={itemHeight}
/>
);
};
// 自定义样式使用
.my-class {
width: 25px;
margin-right: 10px;
}
.my-class .item {
width: 25px;
background: #f60;
color: #fff;
}
`
日志
2023-09-03
修复传入相同数字不执行动画问题（注意：传入相同数字不会触发组件更新，需要单独处理，把再次传入的数字转换成字符串即可）。
2022-08-28
修复样式报错问题。
2022-02-20
优化初始化值或更改后的值为0，导致报错问题。
API
`
className={className}
itemHeight={itemHeight}
symbol={symbol}
scrollTime={scrollTime}
initStatus={initStatus}
/>
``