react-otp-custom/README.md

Customizable React OTP input component

# 🔐 react-otp-code

A fully customizable, modern, and lightweight OTP (One-Time Password) input component built with React.


**Supports:**

- Auto focus and keyboard navigation
- Paste detection
- Numeric or alphanumeric input
- Light/Dark theme
- Square/Circle shape
- Adjustable font size

---

## 📦 Installation

```bash
npm install react-otp-custom
```

---

## 🚀 Usage

```jsx
import React, { useState } from 'react';
import OtpInput from 'react-otp-code';

function App() {
  const [code, setCode] = useState('');

  return (
    <div>
      <h2>Enter OTP:</h2>
      <OtpInput
        length={6}
        onChange={(val) => setCode(val)}
        isNumeric={true}
        theme="dark"
        shape="circle"
        fontSize={28}
      />
      <p>Entered Code: {code}</p>
    </div>
  );
}

export default App;
```

---

## 🎛️ Props

| Prop       | Type                         | Default     | Description                                           |
|------------|------------------------------|-------------|-------------------------------------------------------|
| `length`   | `number`                     | `6`         | Number of input boxes (OTP digits)                   |
| `onChange` | `function`                   | —           | Callback with the combined OTP string (required)     |
| `isNumeric`| `boolean`                    | `true`      | Allow only numeric input                             |
| `theme`    | `'light'` \| `'dark'`        | `'light'`   | Theme for styling input                              |
| `shape`    | `'square'` \| `'circle'`     | `'square'`  | Input box shape                                       |
| `fontSize` | `number`                     | `24`        | Font size (also controls input width and height)     |

---

## 🧪 Examples

### ✅ Dark theme with circular input:

```jsx
<OtpInput
  length={4}
  onChange={handleChange}
  theme="dark"
  shape="circle"
  fontSize={20}
/>
```

### 🔡 Alphanumeric OTP with larger font:

```jsx
<OtpInput
  length={8}
  isNumeric={false}
  fontSize={32}
  onChange={handleChange}
/>
```

---

## 🧩 Features

- Fully controlled component
- Mobile-friendly numeric input mode
- Smart auto-focus and backspace navigation
- Paste support with auto-fill
- Simple styling via themes and props

---


## 🛠️ Development

To build locally:

```bash
npm install
npm run build
```

You can then test it by linking or using it in another React project.

---

## 📜 License

MIT © 2025 Saurav Trivedi

---

## 🙋‍♂️ Contributing

Contributions are welcome!  
Feel free to open issues, suggest features, or submit PRs.