CodeInput Component

CodeInput is a flexible React component that provides a customizable input for entering multi-character codes (e.g., OTP, verification codes). You can control the number of input fields, allowed characters, and easily manage input through callbacks for change and submission.

Installation

To install the package, use npm or yarn:

npm install react-code-input-beautify
# or
yarn add react-code-input-beautify

Usage

import React, { useState } from "react";
import { CodeInput } from "react-code-input-beautify";
import "./index.css";

const App = () => {
  const [code, setCode] = useState("");

  const handleChange = (value) => {
    setCode(value);
  };

  const handleSubmitEndCode = (value) => {
    console.log("Submitted Code:", value);
  };

  return (
    <CodeInput
      fields={6}
      value={code}
      onChange={handleChange}
      onSubmitEndCode={handleSubmitEndCode}
      condition="alphanumeric"
      classNameInput="example-classname-for-inputs"
      classNameInputsWrapper="example-classname-for-inputs-wrapper"
      typeLetterCase="upperCase"
      placeholder="______"
    />
  );
};

export default App;

Props