React Easy OTP

A lightweight, dependency-free OTP (One-Time Password) input component built with React and Parcel.

✅ Features

• 🔢 Configurable number of input boxes
• 🚀 Auto focus and move to next input
• ⏱ Auto submit when all fields are filled
• ❌ Backspace support to focus previous
• 🧪 Regex validation per input
• 🎨 Custom separators and styling
• 🟢 Success/Error styling

📁 Folder Structure

🛠 Setup Instructions

1. Clone and install dependencies

npm install react-easy-otp

| Prop | Type | Description | | ------------ | -------- | ------------------------------------ | | numInputs | number | Number of OTP boxes (default: 4) | | autoSubmit | bool | Auto trigger when all fields filled | | type | string | Input type (text or number) | | separator | string | Separator between inputs (e.g., -) | | onChange | func | Callback with full OTP string | | inputClass | string | Custom className for inputs | | regex | RegExp | Validation regex for each input box | | success | bool | If true, green border | | error | bool | If true, red border |

🧪 Example Usage (App.js)

<OtpInput
  numInputs={6}
  autoSubmit={false}
  type="number"
  separator="-"
  onChange={(val) => console.log("OTP:", val)}
/>

🧼 License

MIT