react-easy-otp/README.md

A lightweight and customizable OTP input component built with React and no dependencies.

# 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

```bash
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)
```bash
<OtpInput
  numInputs={6}
  autoSubmit={false}
  type="number"
  separator="-"
  onChange={(val) => console.log("OTP:", val)}
/>
```


## 🧼 License
MIT