Multiple-otp-field NPM

Multiple OTP Field

A customizable and responsive OTP (One-Time Password) input component for React. This package provides an easy-to-use OTP input field that supports automatic focus movement, customizable length, and submission handling.

Features

Customizable OTP length (default is 4)
Auto-focuses on the next input field when a digit is entered
Handles backspace to move focus back to the previous field
Supports OTP submission callback when the full OTP is entered
Includes a reset function via ref
Fully responsive and adaptable to various screen sizes
Prevents non-numeric input
Disables input fields when needed

Installation

To install this package, run the following command in your project directory:

npm install multiple-otp-field

Or if you’re using Yarn:

yarn add multiple-otp-field

Usage

Basic Example

Here’s how to use the OTP input component in your React app.

1. Import the OTP input component:

import OtpInput from "multiple-otp-field";

2. Use the component in your app:

import React, { useRef } from "react";
import OtpInput from "multiple-otp-field";

const App: React.FC = () => {
  const otpRef = useRef<{ reset: () => void } | null>(null);

  const handleOtpSubmit = (otp: string) => {
    console.log("Submitted OTP:", otp);
  };

  return (
    <div>
      <h1>Enter OTP</h1>
      <OtpInput length={6} onOtpSubmit={handleOtpSubmit} ref={otpRef} />
      <button onClick={() => otpRef.current?.reset()}>Reset OTP</button>
    </div>
  );
};

export default App;

Props

The OtpInput component accepts the following props:

Prop	Type	Default	Description
`length`	`number`	`4`	The number of OTP digits (input fields). Default is 4.
`onOtpSubmit`	`(otp: string) => void`	`() => {}`	A callback function that is triggered when the full OTP is entered. It receives the OTP as a string.
`inputClassName`	`string`	`"otpInput"`	CSS class name for individual input fields. Default is `"otpInput"`.
`containerClassName`	`string`	`"otpContainer"`	CSS class name for the container div. Default is `"otpContainer"`.
`disabled`	`boolean`	`false`	If `true`, disables the OTP input fields.
`ref`	`React.Ref<{ reset: () => void }>`	`undefined`	Provides access to the `reset()` function to clear the OTP input.

Example with Custom OTP Length and Styles

import React, { useRef } from "react";
import OtpInput from "multiple-otp-field";
import "./App.scss"; // Include your custom SCSS file

const App: React.FC = () => {
  const otpRef = useRef<{ reset: () => void } | null>(null);

  const handleOtpSubmit = (otp: string) => {
    console.log("OTP submitted:", otp);
  };

  return (
    <div className="app-container">
      <h1>OTP Input with Custom Styles</h1>
      <OtpInput
        length={6}
        onOtpSubmit={handleOtpSubmit}
        inputClassName="custom-input"
        containerClassName="custom-container"
        ref={otpRef}
      />
      <button onClick={() => otpRef.current?.reset()}>Reset OTP</button>
    </div>
  );
};

export default App;

Styling and Responsiveness

The component is fully responsive, and you can easily customize its appearance using CSS. The input fields will automatically adjust their size based on the screen width.

To customize the appearance, you can style the component by targeting the .otpInput class or provide custom class names via the inputClassName and containerClassName props:

.otpInput {
  width: 3rem;
  height: 3rem;
  margin: 0.5rem;
  font-size: 1.5rem;
  text-align: center;
  border-radius: 0.25rem;
  border: 1px solid #ccc;
}

.otpInput:focus {
  outline: none;
  border-color: #4caf50;
}

.custom-container {
  display: flex;
  justify-content: center;
}

.custom-input {
  width: 4rem;
  height: 4rem;
  margin: 0.5rem;
  font-size: 2rem;
  text-align: center;
  border-radius: 0.5rem;
  border: 2px solid #007bff;
}