React OTP Input Pro

A reusable, customizable, and easy-to-use OTP (One-Time Password) input component for React.
Supports numeric, text, or alphanumeric inputs, input shapes, custom focus/error styles, auto-resend timer, and validation.

Features

• Dynamic OTP length (default 6)
• Custom input type: number, text, alphanumeric
• Custom shapes: square, rounded, circle or custom borderRadius
• Focus and error styling
• Auto-clear on resend
• Resend timer button (editable inputs while timer runs)
• Disabled mode

Installation

npm install react-otp-input-pro

Development/Local Linking

For local development using npm link:

1. In the package directory:

   npm run build
   npm link

2. In your consuming project:

   npm link react-otp-input-pro

3. Important: If you're using Vite in your consuming project, add this to your vite.config.js to prevent build errors:

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   
   export default defineConfig({
     plugins: [react()],
     optimizeDeps: {
       exclude: ['react-otp-input-pro']
     },
     resolve: {
       dedupe: ['react', 'react-dom']
     }
   });

   This prevents Vite from trying to process the linked package and resolves React version conflicts.

Usage Example

import React, { useState } from "react";
import OtpInput from "react-otp-input-pro";

function App() {
  const [otp, setOtp] = useState("");
  const [isWrong, setIsWrong] = useState(false);

  const handleResend = () => {
    alert("OTP resent!");
    setOtp(""); // Clear OTP input
  };

  return (
    <div>
      <h2>Reusable OTP Component</h2>
      <OtpInput
        length={6}
        type="number"
        shape="rounded"
        cornerRadius="50%"
        value={otp}
        onChangeOtp={setOtp}
        hasError={isWrong}
        focusColor="#007bff"
        errorColor="red"
        disabled={false}
        resendTime={30}
        onResend={handleResend}
      />
      <h3>Real OTP: {otp}</h3>
    </div>
  );
}

export default App;


##Validation Rules

Number: Only digits 0-9

Text: Only letters a-zA-Z

Alphanumeric: Letters and numbers only a-zA-Z0-9

Invalid characters are automatically ignored.


###Resend Timer Behavior

Resend button is disabled for resendTime seconds after clicking.
OTP input boxes remain editable while the timer runs.
You can reset OTP manually in the onResend callback using onChangeOtp("").

###Customization
Input Shape: via shape (square/rounded/circle) or cornerRadius ("50%", "8px", etc.)
Focus Color: via focusColor prop
Error Color: via errorColor prop
Disabled State: via disabled prop

## Props Reference

| Prop          | Type             | Default     | Description |
|---------------|-----------------|------------|------------|
| `length`      | `number`         | `6`        | Number of OTP input boxes. |
| `type`        | `string`         | `"number"` | Type of input: `"number"`, `"text"`, or `"alphanumeric"`. |
| `shape`       | `string`         | `"square"` | Shape of input boxes: `"square"`, `"rounded"`, `"circle"`. |
| `cornerRadius`| `string`/`number`| -          | Custom border-radius (overrides `shape`). Accepts pixels (`"8px"`) or percentage (`"50%"`). |
| `focusColor`  | `string`         | `"#000"`   | Border color when input is focused. |
| `errorColor`  | `string`         | `"red"`    | Border color when `hasError` is true. |
| `value`       | `string`         | `""`       | Current OTP value. |
| `onChangeOtp` | `function`       | -          | Callback fired on OTP change. Receives the updated OTP as an argument. |
| `hasError`    | `boolean`        | `false`    | If `true`, shows error styling on inputs. |
| `disabled`    | `boolean`        | `false`    | Disables the OTP inputs when `true`. |
| `resendTime`  | `number`         | `0`        | Duration in seconds for which the resend button is disabled. |
| `onResend`    | `function`       | -          | Callback fired when the resend button is clicked. |


##Example
<OtpInput
  length={4}
  type="alphanumeric"
  shape="circle"
  focusColor="#28a745"
  errorColor="#dc3545"
  value={otp}
  onChangeOtp={setOtp}
  hasError={false}
  resendTime={15}
  onResend={() => console.log("OTP Resent!")}
/>


## License

MIT © Deepak Pradhan

This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.