react-time-countdown

React的倒计时组件

  1. npm:https://www.npmjs.com/package/react-time-countdown
  2. demo:https://realgeoffrey.github.io/react-time-countdown/demo/index.html

安装-引用

  1. Node.js

     npm install react-time-countdown --save
    
     import TimeCountdown from 'react-time-countdown'
    
  2. 浏览器

     <!-- 需要先引入react技术栈:
         <script src='//unpkg.com/react@18/umd/react.production.min.js'></script>
         <script src='//unpkg.com/react-dom@18/umd/react-dom.production.min.js'></script>
    
         <script src='//unpkg.com/babel-standalone@6/babel.min.js'></script>
     -->
     <script src="//unpkg.com/react-time-countdown"></script>
    
     <script>
     const TimeCountdown = window['react-time-countdown'].default
     </script>
    

用法

<TimeCountdown
  deadlineTimestamp={结束时间戳必填}
  callback={() => {
    // 倒计时结束时执行的回调函数
  }}
  leftMillisecond={提前到期的毫秒数0}
  renderMillisecond={(millisecond: number): React.ReactNode => {
    // 参数:倒计时还剩下多少毫秒
    // 返回:渲染本组件
  }}
  intervalDelay={每次调用渲染的间隔时间毫秒1000}
/>

开发调试

# 监听改变
yarn start

# 运行开发demo
cd dev
yarn start
# 构建生产环境文件
yarn build