OTP Input Component

A customizable OTP (One-Time Password) input component for React.

• Keyboard support
• Custom separators support
• TypeScript compatible
• Resend and Timer Logic support
• Tailwind classes support

Installation and Usage

To install:

npm i react-one-time-password

Take a look at the basic usage:

import React, { useState } from "react";
import { OTPInput } from "react-one-time-password";

const App: React.FC = () => {
  const handleOtpChange = (otp: string) => {
    console.log("OTP:", otp);
  };

  return (
    <div>
      <h1>Enter OTP</h1>
      <OTPInput
        numberOfInputs={6}
        onChange={handleOtpChange}
        // Custom styles for larger inputs
        inputStyle={{ width: "2em", height: "3em", fontSize: "1.5em" }}
      />
    </div>
  );
};

export default App;

Asides from the direct style props, you can also pass the classNames prop in case you need custom class names for styling or Tailwind classes.

The classNames prop supports the following keys:

• container: For the main container of the OTP input fields.

• input: For individual OTP input fields.

• resend-button-container: For the container of the resend button.

• resend-button: For the resend button itself.

• input-separators: For the separators between OTP input

<OTPInput
  numberOfInputs={4}
  onChange={(otp) => console.log(otp)}
  // Tailwind classes
  classNames={{
    container: "flex items-center",
    input: "w-12 h-12 text-center border rounded-md",
    "resend-button-container": "mt-4",
    "resend-button": "px-4 py-2 bg-blue-500 text-white rounded",
    "input-separators": "mx-2",
  }}
/>

If you wish to have a Resend OTP and Timer logic, you can enable the showResendButton prop and optionally pass any custom markup via the renderResendContainer and renderResendButton as shown below:

import React, { useState } from "react";
import { OTPInput } from "react-one-time-password";

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

  const handleOtpChange = (newOtp: string) => {
    setOtp(newOtp);
  };

  const handleResend = () => {
    console.log("Resend OTP triggered");
    // Add your resend logic here, e.g., making an API call to resend the OTP
  };

  const customRenderResendContainer = (children: React.ReactNode) => (
    <div style={{ marginTop: "1rem", textAlign: "center" }}>{children}</div>
  );

  const customRenderResendButton = (
    onClick: () => void,
    disabled: boolean,
    timer: number
  ) => (
    <button
      onClick={onClick}
      disabled={disabled}
      style={{
        padding: "0.5rem 1rem",
        backgroundColor: disabled ? "#ccc" : "#007bff",
        color: "#fff",
        border: "none",
        borderRadius: "4px",
        cursor: disabled ? "not-allowed" : "pointer",
      }}
    >
      {disabled ? `Resend OTP in ${timer} seconds` : "Resend OTP"}
    </button>
  );

  return (
    <div>
      <h2>OTP Verification</h2>
      <OTPInput
        numberOfInputs={6}
        onChange={handleOtpChange}
        inputWidth="1em"
        inputHeight="3em"
        borderColor="#007bff"
        borderRadius="4px"
        resendTimeout={60}
        onResend={handleResend}
        showResendButton
        renderResendContainer={customRenderResendContainer}
        renderResendButton={customRenderResendButton}
      />
      <p>Entered OTP: {otp}</p>
    </div>
  );
}

export default App;

For more options, feel free to check out the props below:

Special Thanks to these Contributors

Emmanuel O. Eboh 💻

Success Kingsley 💻

Rasheed 💻