to install run:
yarn add react-otp-resender
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 |