🔐 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

npm install react-otp-custom

🚀 Usage

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:

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

🔡 Alphanumeric OTP with larger font:

<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:

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.