0.0.12 • Published 8 months ago
count-up-react v0.0.12
count-up-react
react 数字滚动组件
Usage
感谢大家的厚爱,问题反馈:laji198888@163.com
1:安装
npm install count-up-react --save
or
yarn add count-up-react
2:引入
import { Countup } from 'count-up-react'
3:使用
<Countup />
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 (
<div>
<div className="demo">
<h3>默认</h3>
<Countup number={number} />
</div>
<div className="demo">
<h3>千位分割</h3>
<Countup number={number} symbol={symbol} />
</div>
<div className="demo">
<h3>自定义</h3>
<Countup
number={number}
className={className}
itemHeight={itemHeight}
/>
</div>
</div>
);
};
// 自定义样式使用
.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
<Countup
number={number}
className={className}
itemHeight={itemHeight}
symbol={symbol}
scrollTime={scrollTime}
initStatus={initStatus}
/>
number(必填)
滚动数字 Number
symbol
千位分隔符 不显示(默认) String
scrollTime
数字滚动时间(默认 1000,毫秒) Number
className
自定义样式 class String
initStatus
初始化是否滚动(默认 true) Boolean
itemHeight
数字滚动高度(默认 20px) Boolean