React Codedown Clock

A simple countdown clock as a React component use typescript.

Installation

npm install react-codedown --save

Usage

import * as React from 'react'
import CountDown from 'react-codedown'

class App extends from React.Component {

    delay = (time) => new Promise((resolve, reject) => {
        setTimeout(resolve, time)
    })

    handleClick = async () => {
        await this.delay(3000)
        this.countdown.reset()
    }

    render(){
        return (    
            <CountDown 
                initialRemaining={60}
                initialContent="获取验证码"
                style={{ width: 80, height: 40 }}
                className="myClass"
                onClick={this.handleClick}
                ref={ref => this.countdown = ref}
                interval={1000}
            />
        )
    }
}

Props

| prop | type | default | description | |------------------|----------------|---------|-----------------------------------------------------------| | initialRemaining | number | 60 | 倒计时时间 | | initialContent | string | 获取验证码 | 按钮初始文本 | | style | object | - | 按钮内联样式 | | className | string | - | 按钮类名 | | onClick | function | - | 点击触发的函数 | interval | number | 1000 | 时间间隔

methods

start
开始倒计时

reset
重置倒计时