React simple OTP fields

It is a minimal package that provides simple to use OTP input fields with most of the functionalities that are required. This package does not enforce any styles on the input fields.

Installation

npm install react-simple-otp-fields

Demo / Playground

Here is a link to the playground/demo where you can experience the package and also try out the themes, as well as make your own.

Usage

import { OtpFields } from "react-simple-otp-fields";
import { useState } from "react";

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

    // handler functions
    function handleOnChange(val) {
        setOtp(val);
    }

    function handleOnComplete() {
        console.log("Completed");
    }

    return (
        <OtpFields 
            length={4} 
            gap={8} 
            otp={otp} 
            onChange={handleOnChange} 
            onComplete={handleOnComplete}
            seperator={"-"}
            inputAttr={{
                //input attributes
            }}
        />
    );
}

export default App;

Minimal styles

If some basic styling is required than the style.css from the package can be imported and used.

import { OtpFields } from "react-simple-otp-fields";
import "react-simple-otp-fields/dist/style.css";

Props

Name	Type	Description
length	number	The number of input fields required, default = 2.
seperator	ReactNode | undefined	A react node placed between the input fields.
gap	number | string | undefined	Defines the space between two adjacent input fields also takes into account the spacing for the seperator if a seperator is provided, default = 8.
onChange	(val: string[], index?: number) => void	Executes on every keystroke. Provides the updated OTP and an optional index number.
otp	string[]	state variable passed onto the component props that wil reflect the latest change.
onComplete	() => void | undefined	Executes when passed, after all the input fields are filled.
autoFocus	boolean | undefined	Makes the first input field focus when the component is mounted.
containerClasses	string | undefined	classnames applied to the enclosing container of the input fields.
inputClasses	string | undefined	classnames applied to each of the input fields.
containerAttr	DetailedHTMLProps<HTMLAttributes, HTMLDivElement> | undefined	gives access to all the attributes for the enclosing container of the input fields.
inputAttr	DetailedHTMLProps<InputHTMLAttributes, HTMLInputElement> | undefined	gives access to all the attributes of a input field.