otp-gen-ui

A lightweight React component + utility package for generating One-Time Passwords (OTP) and rendering customizable OTP input boxes.

✨ Features

• ✅ Generate OTP of any length (4, 6, etc.)
• ✅ OTP input boxes with keyboard navigation
• ✅ Fully customizable via styles
• ✅ Built with TypeScript and React

📦 Installation

npm install otp-gen-ui
or
yarn add otp-gen-ui

🚀 Usage

1. Import the component and generator

import React from "react";
import { generateOtp, OtpBox } from "otp-gen-ui";

2. Use the OTP generator function

const otp = generateOtp(6); // Example: "382471"
console.log("Generated OTP:", otp);

3. Render the OTP input UI

<OtpBox
  length={6}
  onChange={(val) => console.log("Current OTP:", val)}
  style={{ justifyContent: "center" }}
  inputStyle={{ border: "2px solid blue", borderRadius: "8px" }}
/>

🔧 Props for OtpBox

| Prop | Type | Default | Description | | ------------ | ----------------------- | ------- | ------------------------------- | | length | number | 6 | Number of OTP input boxes | | onChange | (otp: string) => void | — | Triggered when input changes | | style | CSSProperties | — | Style for the container wrapper | | inputStyle | CSSProperties | — | Style for each input box |

🧪 Example in a React Component

import React from 'react';
import { OtpBox, generateOtp } from 'otp-gen-ui';
const App = () => {
  const otp = generateOtp(4);
  return (
    <div>
      <h2>Enter your OTP</h2>
      <OtpBox
        length={4}
        onChange={(val) => console.log("OTP:", val)}
        inputStyle={{ border: "1px solid #333", borderRadius: "5px" }}
      />
    </div>
  );
};

📄 License

This package is licensed under the MIT License.

🙌 Author

Made with ❤️ by npdevind

🔑 Keywords

• OTP
• OTP Generator
• OTP Input Box
• React Component
• React OTP
• TypeScript