zz-count-up

react 数字滚动组件

Usage

1:安装

npm install zz-count-up --save
or
yarn add zz-count-up

2:引入

import { RollNum } from 'zz-count-up'

3:使用

<RollNum />

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>
        <RollNum number={number} />
      </div>
      <div className="demo">
        <h3>千位分割</h3>
        <RollNum number={number} symbol={symbol} />
      </div>
      <div className="demo">
        <h3>自定义</h3>
        <RollNum
          number={number}
          className={className}
          itemHeight={itemHeight}
        />
      </div>
    </div>
  );
};

// 自定义样式使用
.my-class {
  width: 25px;
  margin-right: 10px;
}
.my-class .item {
  width: 25px;
  background: #f60;
  color: #fff;
}

API

<RollNum
    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]