Skip to content

realgeoffrey/react-time-countdown

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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