otp-input-react

otp-input-react

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

Working Demo

Installation

npm install --save otp-input-react

Usage:

function App() {
  const [OTP, setOTP] = useState("");
  return (
    <OTPInput
      value={OTP}
      onChange={setOTP}
      autoFocus
      OTPLength={4}
      otpType="number"
      disabled={false}
      secure
    />
  );
}

API

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 inital 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

TODO

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

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.