otp-timer

Install

Install by executing either npm install otp-timer or yarn add otp-timer

Demo

react-otp-timer

Usage?

``
import OtpTimer from 'otp-timer'
import React, { Component } from "react";

handleClick=()=>{
//desired function to be performed on clicking resend button
}

export default class Otp extends Component {
render () {
return (

)
}
}


``

User Guide?

Functionality:

| Prop name | Description | Default Value | Example |
| :--------- | :-------------------------------------------------------------: | :-----------: | ---------------------: |
| seconds | number of seconds for which timer must be set | 30 | seconds={20} |
| minutes | number of minutes for which the timer must be set | 0 | minutes={1} |
| resend | function that would get triggered on clicking the resend button | n/a | resend={function name} |
| text | content that you want to put down | Time Left : | text="Time Left" |
| ButtonText | button content | Resend | ButtonText="Resend" |

Styling:

| Prop name | Description | Default Value | Example |
| :-------------- | :-----------------------------------------: | :-----------: | ------------------------------: |
| textColor | describes the timer's text color | "#000000" | textColor={"#000000"} |
| buttonColor | describes the button's text color | "#fff" | buttonColor={"#fff"} |
| background | describe the background color of the button | "#0033cc" | background={"#0033cc"} |
| buttonClassName | describe custom classname for button | n/a | buttonClassName="btnClass" |
| buttonStyle | describe custome styles for button | - | buttonStyle={{color:"#fff"}} |
| timerSpanClass | describe custom classname for timerspan | - | timerSpanClass="timerClass" |
| timerSpanStyle | describe custom styles for timerspan | - | timerSpanStyle={{font:"Inter"}} |

---

License

MIT © Simran Gupta & Tanmay Sharma