otp-input-react

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

Working Demo

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 onResendClick={() => console.log("Resend clicked")} />
    </>
  );
}

API

OTP input

Name	Type	Required	Default	Description	Status
OTPLength	Number	false	4	Number of input boxes.	Working
onChange	Function	true	-	Returns OTP code typed in inputs.	Working
value	String / Number	true	''	The value of the otp passed into the component.	Working
disabled	Boolean	false	false	Disables all the inputs.	Working
autoFocus	Boolean	false	false	Auto focuses input on initial page load.	Working
otpType	Enum: any|number|alpha|alphanumeric	false	any	any - allows any value. number - allow only numbers. alpha - allows only a-zA-Z. alphanumeric - allows 0-9a-zA-z	Working
secure	Boolean	false	false	Change input type to password.	Working
inputClassName	String	-	-	Class for root element.	Working
className	String	-	-	Class for root element.	Working
inputStyles	Object	-	-	Styles for input element.	Working
style	Object	-	-	Styles for root element.	Working
placeholder	Array<String>	false	-	Placeholder value of each input.	Working

Resend OTP

Name	Type	Required	Default	Description	Status
maxTime	Number	false	60	Timer that user has to wait before resend otp gets active.	Working
onResendClick	Function	true	-	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 trigger	Working
onTimerComplete	Function	false	-	An optional callback when timer completes.	Working
timeInterval	Number	false	1000	You can change time interval.	Working
renderTime	Function - render props	false	-	You can use your own component for seconds. Function will get remainingTime as props you can use it to show timer.	Working
renderButton	Function - render props	false	-	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
style	Object	false	-	For changing root component inline styles	Working
className	string	false	-	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

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

Credits

https://github.com/hotdang-ca - For adding alpha|alphanumeric type and updating docs

Contributing

Feel Free to contributing or feature request

1. Fork it ( https://github.com/shubhanus/otp-input-react/fork )
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new pull request.