react-otp-kit

A lightweight and versatile component designed to simplify the implementation of OTP (One-Time Password) input fields in React applications for desktop and mobile.

Live Demo

Installation

To install the latest stable version:

npm install --save react-otp-kit

Basic Usage

import { useState } from "react";
import { OtpKit } from "react-otp-kit";
import "react-otp-kit/dist/index.css";

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

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

  return (
    <>
      <OtpKit
        value={otp}
        onChange={handleChange}
        type={"number"}
      />
    </>
  );
};

export default App;

API

Props

| Name | Type | Required | Default | Description | Status | | ------------------------- | ---------------------------------- | -------- | ---------------------------- | -------------------------------------------------------------------- | ------ | | value | string | Yes | - | The current value of the OTP input. | Stable | | onChange | (value: string) => void | Yes | - | Callback function triggered when the OTP value changes. | Stable | | numOfInputs | number | No | 6 | Number of OTP input fields to display. | Stable | | placeholder | string | No | - | Placeholder text for the OTP input fields. | Stable | | autoSubmit | boolean | No | false | Automatically submit the OTP when all input fields are filled. | Stable | | autoFocus | boolean | No | true | Automatically focus on the first OTP input field on component mount. | Stable | | separator | Object | No | - | Configuration for displaying separators between OTP input fields. | Stable | | separator.show | boolean | No | - | Show separators between input fields. | Stable | | separator.value | string | No | - | The value to display as a separator. | Stable | | separator.intervals | number | Yes | - | The intervals at which separators should be displayed. | Stable | | separator.className | string | No | - | CSS class for styling the separator. | Stable | | submitOtpButton | Object | No | Default Submit Button Config | Configuration for the submit OTP button. | Stable | | submitOtpButton.show | boolean | No | true | Show the submit OTP button. | Stable | | submitOtpButton.text | string | No | Submit | Text to display on the submit OTP button. | Stable | | submitOtpButton.className | string | No | rok__submit_button | CSS class for styling the submit OTP button. | Stable | | clearOtpButton | Object | No | Default Clear Button Config | Configuration for the clear OTP button. | Stable | | clearOtpButton.show | boolean | No | false | Show the clear OTP button. | Stable | | clearOtpButton.text | string | No | Clear | Text to display on the clear OTP button. | Stable | | clearOtpButton.className | string | No | rok__clear_button | CSS class for styling the clear OTP button. | Stable | | type | "number" \| "text" \| "password" | Yes | - | The type of the OTP input fields (number, text, or password). | Stable | | inputStyles | Object | No | - | Custom styles for the OTP input fields. | Stable | | inputStyles.generalStyles | string | No | rok__input--defaultStyles | General CSS class for styling the OTP input fields. | Stable | | inputStyles.onFill | string | No | rok__defaultFill | CSS class for styling the OTP input fields when they are filled. | Stable |

ResendCode Props

| Name | Type | Required | Default | Description | Status | | -------------------------------- | --------------------- | -------- | -------------------- | -------------------------------------------------------------------------------------- | ------ | | resendOtpButton | Object | Yes | - | Configuration for the resend OTP button. | Stable | | resendOtpButton.localFunctions | () => any | No | - | Function to call for local OTP generation. | Stable | | resendOtpButton.apiURL | string | No | - | API URL for fetching a new OTP. | Stable | | resendOtpButton.initialCountdown | number | No | 60 | Initial countdown time for the resend button in seconds. | Stable | | resendOtpButton.show | boolean | No | true | Show the resend OTP button. | Stable | | resendOtpButton.text | string | No | Resend code | Text to display on the resend OTP button. | Stable | | resendOtpButton.className | string | No | rok__resend_button | CSS class for styling the resend OTP button. | Stable | | resendOtpButton.responseData | (data: any) => void | No | - | Callback function to handle the response data from the OTP generation function or API. | Stable |

ResendCode Button & Timer

import { useState } from "react";
import { OtpKitResendCode } from "react-otp-kit";

function App() {
   const [localOtp, setLocalOtp] = useState("");
  const [apiOtp, setApiOtp] = useState("");

  const handleLocalResponseData = (data: any) => {
    setLocalOtp(data);
  };

  const handleApiResponseData = (data: any) => {
    setApiOtp(data.otp);
  };

  // Example: locally generating random codes as OTP
  const generateRandomDigits = () => {
    let result = "";
    const characters = "0123456789";
    const length = 6;
    for (let i = 0; i < length; i++) {
      result += characters.charAt(
        Math.floor(Math.random() * characters.length)
      );
    }
    return result;
  };

  return (
    <>
      <OtpKitResendCode
        resendOtpButton={{
          localFunctions: generateRandomDigits,
          initialCountdown: 10,
          text: "Resend code (Local)",
          className: "resendbutton__styles",
          responseData: handleLocalResponseData, // Pass the function to handle response data
        }}
      />
      <p>Generated Local OTP: {localOtp}</p>
      <OtpKitResendCode
        resendOtpButton={{
          apiURL:
            "https://run.mocky.io/v3/5b8c2be7-ae6d-4ca4-9ece-fe5d96fdb120",
          initialCountdown: 10,
          text: "Resend code (API)",
          className: "resendbutton__styles",
          responseData: handleApiResponseData, // Pass the function to handle response data
        }}
      />
      <p>Generated API OTP: {apiOtp}</p>
    </>
  );
};

export default App

⚠️ Warning

To ensure proper functionality, avoid overriding the following props on the input component returned from the renderInput prop. Modifying these props can result in unexpected behavior:

• ref
• value
• onChange
• onFocus
• onBlur
• onKeyDown
• onPaste
• onInput
• type
• inputMode

Contributing

We welcome contributions from the community to improve the React OTP Kit. Whether you want to report bugs, suggest new features, or submit pull requests, your involvement is highly appreciated. Please refer to our contributing guidelines for more information on how to get started.

License

This project is licensed under the MIT License. For more details, please refer to the LICENSE file.

Contributors

A big thank you to all the contributors who have helped make this project better. Your contributions are what make this project possible. If you’d like to see your name on this list, check out our contributing guidelines and get involved!

Contributors

• keys78
• Hannahadora