Developed a customizable one-time password (OTP) component built with React. The component allows users to enter OTPs and can be customized to match the look and feel of the website, and it can also be added features such as auto-focus and auto-fill.
$ npm install --save react-otp-input-fields
import React, { useState } from "react";
import OtpInput from "react-otp-input-fields";
export default function App() {
const [otp, setOtp] = useState("");
return (
<OtpInput
value={otp}
otpFields={4}
onCodeFilled={setOtp}
placeholder={"-"}
/>
);
}| Name |
Type | Required | Default | Description |
|---|---|---|---|---|
| otpFields | number | true | 5 | Number of OTP inputs to be rendered |
| onCodeFilled | function | true | - | Returns OTP code typed in inputs |
| autoFocus | boolean | false | false | auto focuses input first field on page load |
| disabled | boolean | false | false | Disable otp input fields |
| value | string | true | "" | value of the OTP passed into the component |
| placeholder | string | false | "-" | placeholder character which will be filled for each inputs |