react-code-input-beautify

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

Prop	Type	Default	Description
fields	number	Required	Number of input fields (length of the code).
value	string	Required	The current value of the input.
onChange	(value: string) => void	Required	Callback for when the input value changes.
onSubmitEndCode	(value: string) => void	Optional	Callback triggered when the last character is entered, provided that all fields are also entered
classNameInput	string	""	Custom class name for each input field.
classNameInputsWrapper	string	""	Custom class name for the input wrapper div.
condition	"numbers", "letters", "alphanumeric", "any", RegExp	"any"	Condition that defines what type of characters are allowed.
typeLetterCase	"upperCase", "lowerCase", "any"	"any"	Specifies whether the input should be in uppercase or lowercase.
placeholder	string	""	Placeholder to show in the inputs.
InputsProps	React.InputHTMLAttributes<HTMLInputElement>	{}	Additional props to pass to each input element.
WrapperProps	React.HTMLAttributes<HTMLDivElement>	{}	Additional props to pass to the wrapper element.