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 (
默认
千位分割
自定义
number={number}
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
`
number={number}
className={className}
itemHeight={itemHeight}
symbol={symbol}
scrollTime={scrollTime}
initStatus={initStatus}
/>
``