Skip to content

amiralidev/react-otp-resender

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Otp Resender

to install run: yarn add react-otp-resender

Usage

Just import the component and pass the second and styles in otp component.

import React from 'react'
import ReactOtpResender from 'react-otp-resender';

class App extends React.Component {

    //callback of resend button
    resendEvent() { 
       // You can do what ever you want & reset timer too.
    }
    
    render() {
      return (
          <div>
              <h1>Otp Timer counter</h1>
               <ReactOtpResender 
                      seconds={120}
                      textStyle={{
                          color: 'white'
                      }}
                      resendBtnText={'Send OTP again'}
                      resendBtnStyle={{
                          color: 'white',
                          backgroundColor: 'transparent', 
                          outline: 'none', 
                          border: 0, 
                          cursor: 'pointer'
                      }}
                      resendFunc={ _ => this.resendEvent()}
                  />
              </div>
          </div>
      )
    }
}
export default App

#API

Name
Type Required Description
seconds number true
resendBtnStyle style true after seconds finished the btn appears
resendBtnText string true after seconds finished the btn appears
textStyle style true
resendFunc function true