input

React simple otp input with react hooks

Aug 25, 2019
React simple otp input with react hooks

otp-input-react

A fully customizable, one-time password input with resend OTP component for the web built with React functional component.

otp-input-react

View Demo View Github

Installation

npm install --save otp-input-react

Usage:

import OTPInput, { ResendOTP } from "otp-input-react"; function App() { const [OTP, setOTP] = useState(""); return ( <OTPInput value={OTP} onChange={setOTP} autoFocus OTPLength={4} otpType="number" disabled={false} secure /> <ResendOTP handelResendClick={() => console.log("Resend clicked")} /> ); }

API

OTP input

NameTypeRequiredDefaultDescriptionStatus
OTPLengthNumberfalse4Number of input boxes.Working
onChangeFunctiontrue-Returns OTP code typed in inputs.Working
valueString / Numbertrue''The value of the otp passed into the component.Working
disabledBooleanfalsefalseDisables all the inputs.Working
autoFocusBooleanfalsefalseAuto focuses input on initial page load.Working
otpTypeEnum: any|number|alpha|alphanumericfalseanyany - allows any value. number - allow only numbers. alpha - allows only a-zA-Z. alphanumeric - allows 0-9a-zA-zWorking
secureBooleanfalsefalseChange input type to password.Working
inputClassNameString--Class for root element.Working
classNameString--Class for root element.Working
inputStylesObject--Styles for input element.Working
styleObject--Styles for root element.Working

Resend OTP

NameTypeRequiredDefaultDescriptionStatus
maxTimeNumberfalse60Timer that user has to wait before resend otp gets active.Working
onResendClickFunctiontrue-Function get triggers when user click on resend otp button. But when button is disabled(i.e. time is not completed) it won't get triggerWorking
onTimerCompleteFunctionfalse-An optional callback when timer completes.Working
timeIntervalNumberfalse1000You can change time interval.Working
renderTimeFunction - render propsfalse-You can use your own component for seconds. Function will get remainingTime as props you can use it to show timer.Working
renderButtonFunction - render propsfalse-You can use your own component for resend button. Function will get disabled and onClick function and remainingTime as props you can pass it to your component.Working
styleObjectfalse-For changing root component inline stylesWorking
classNamestringfalse-For adding class to root component.Working

Custom timer and button component

const renderButton = buttonProps => { return <button {...buttonProps}>Resend</button>; }; const renderTime = remainingTime => { return <span>{remainingTime} seconds remaining</span>; }; <ResendOTP renderButton={renderButton} renderTime={renderTime} />;

Hide timer and show sec in button component

const renderButton = buttonProps => { return ( <button {...buttonProps}> {buttonProps.remainingTime !== 0 ? `Please wait for ${buttonProps.remainingTime} sec` : "Resend"} </button> ); }; const renderTime = () => React.Fragment; <ResendOTP renderButton={renderButton} renderTime={renderTime} />;

TODO

  • [x] Add other type input
  • [ ] Change scaffolding
  • [ ] Add CI
  • [x] Add OTP Timer with resend otp optional type
  • [ ] Add Complete callback for otp

GitHub

Recommended