count-up-react

react 数字滚动组件

Usage

感谢大家的厚爱，问题反馈：[email protected]

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]