react-otpify 🔒✨

react-otpify is a customizable and accessible React component for handling OTP (One-Time Password) input. It allows users to input OTPs of a specified length, supports automatic focus management, error handling, and more. It is designed with flexibility, ease of use, and accessibility in mind.

Features 🚀

• Customizable Length: Specify the length of the OTP input field.
• Focus Management: Automatically focuses the next input field after entering a digit.
• Backspace Handling: Focuses the previous input field when backspace is pressed on an empty field.
• Paste Support: Supports pasting OTPs, automatically filling the input fields and focusing the next empty field.
• Submit on Complete: Calls the onSubmit handler when all OTP fields are filled.
• Error Handling: Displays an error style when the error prop is true.
• Disabled State: Disables the OTP input fields when the disabled prop is true.
• Custom Placeholder: Allows customization of the placeholder text.
• Accessibility: Includes proper ARIA attributes for better accessibility.

Installation 📦

To install react-otpify, you can use npm or yarn:

npm install react-otpify
# or
yarn add react-otpify

Usage

Basic Example 🖥️

import React, { useState } from "react";
import OtpInput from "react-otpify";

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

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

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

  return (
    <div>
      <h2>Enter OTP</h2>
      <OtpInput
        length={6}
        onChange={handleOtpChange}
        onSubmit={handleOtpSubmit}
        placeholder="-"
        error={false}
        disabled={false}
      />
      <p>Entered OTP: {otp}</p>
    </div>
  );
};

export default App;

Props 📋

| Prop | Type | Default | Description | | ------------- | ----------------------------- | ------- | ------------------------------------------------------------------ | | length | number | 6 | The length of the OTP input field. | | onChange | (otpString: string) => void | - | A callback function that is called whenever the OTP value changes. | | onSubmit | (otpString: string) => void | - | A callback function that is called when all OTP fields are filled. | | placeholder | string | "-" | The placeholder text for each OTP input field. | | error | boolean | false | If true, applies an error style to the input fields. | | disabled | boolean | false | If true, disables all OTP input fields. |

Advanced Example

import React, { useState } from "react";
import OtpInput from "react-otpify";

const AdvancedApp = () => {
  const [otp, setOtp] = useState("");
  const [error, setError] = useState(false);

  const handleOtpChange = (otpString: string) => {
    setOtp(otpString);
    setError(otpString.length !== 6); // Example of setting error based on OTP length
  };

  const handleOtpSubmit = (otpString: string) => {
    if (otpString === "123456") {
      alert("OTP Verified!");
    } else {
      alert("Invalid OTP");
    }
  };

  return (
    <div>
      <h2>Advanced OTP Input</h2>
      <OtpInput
        length={6}
        onChange={handleOtpChange}
        onSubmit={handleOtpSubmit}
        placeholder="-"
        error={error}
        disabled={false}
      />
      <p>Entered OTP: {otp}</p>
    </div>
  );
};

export default AdvancedApp;

Accessibility

• ARIA Attributes: The component includes aria-invalid and aria-disabled attributes to improve accessibility for screen readers.
• Focus Management: The component automatically manages focus to improve user experience, especially when pasting OTPs or using the backspace key.

Custom Styling 🎨

You can customize the styles of the OTP input fields by modifying the OtpInput.css file. Here's a basic example:

/* OtpInput.css */
.otp-input-container {
  display: flex;
  gap: 10px;
}

.otp-input {
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.otp-input:focus {
  border-color: #007bff;
}

.otp-input.error {
  border-color: red;
}

.otp-input[disabled] {
  background-color: #f0f0f0;
  cursor: not-allowed;
}

Customizing the Placeholder

You can customize the placeholder by passing the placeholder prop:

<OtpInput
  length={6}
  onChange={handleOtpChange}
  onSubmit={handleOtpSubmit}
  placeholder="-"
  error={false}
  disabled={false}
/>

Error Handling

You can show an error state by setting the error prop to true. This will apply an error style to the input fields:

<OtpInput
  length={6}
  onChange={handleOtpChange}
  onSubmit={handleOtpSubmit}
  placeholder="-"
  error={true}
  disabled={false}
/>

Disabling the Inputs

To disable the OTP inputs, simply set the disabled prop to true:

<OtpInput
  length={6}
  onChange={handleOtpChange}
  onSubmit={handleOtpSubmit}
  placeholder="-"
  error={false}
  disabled={true}
/>

Testing 🧪

The component can be tested using Jest. Here's an example of a test case for the component:

import { render, fireEvent } from "@testing-library/react";
import OtpInput from "react-otpify";

test("OTP input changes and submits correctly", () => {
  const handleChange = jest.fn();
  const handleSubmit = jest.fn();

  const { getByPlaceholderText } = render(
    <OtpInput
      length={6}
      onChange={handleChange}
      onSubmit={handleSubmit}
      placeholder="-"
    />
  );

  const inputs = Array.from({ length: 6 }).map(
    (_, index) => getByPlaceholderText("-")[index]
  );

  fireEvent.change(inputs[0], { target: { value: "1" } });
  fireEvent.change(inputs[1], { target: { value: "2" } });

  expect(handleChange).toHaveBeenCalledWith("12");
  fireEvent.change(inputs[5], { target: { value: "6" } });

  expect(handleSubmit).toHaveBeenCalledWith("123456");
});

Contributing 🤝

We welcome contributions! To contribute, please fork this repository, create a new branch, and submit a pull request. Be sure to follow the coding standards and include tests for any new features.

License 📜

This project is licensed under the MIT License.