react-headless-passcode

A headless UI for building easy to use passcode component.

What is an passcode component? It is a group of input elements with each element only accepting one character. This component is generally used in authentication flows.

• Installation
• Usage
• Features
• API
• License

Installation

yarn add react-headless-passcode

Usage

import { usePasscode } from "react-headless-passcode";

With the usePasscode hook you just need to pass the count property and in return you get the array in which the actual passcode value is stored, various event hanlders that handles the focus management logic between multiple inputs and refs that references each input element.

For example:

const PasscodeComponent = () => {
    const { array, getEventHandlers, refs } = usePasscode({
        count: 4,
    });

    return (
        <>
            {array.map((value, index) => {
                const { ...rest } = getEventHandlers(index);
                return (
                    <input
                        className="single-input"
                        ref={(el) => el && (refs.current[index] = el)}
                        type="text"
                        inputMode="numeric"
                        autoComplete="one-time-code"
                        maxLength={1}
                        pattern="\d{1}"
                        value={String(value)}
                        key={`index-${index}`}
                        {...rest}
                    />
                );
            })}
        </>
    );
};

NOTE: It is important to initialize the refs object with the current input element because this is how the usepasscode is able to track the current index and manage the focused state across multiple inputs. Make sure to assign this element to the refs or else the focus won't change!!

ref={(el) => el && (refs.current[index] = el)}

Features

• Allow entering alpha numeric characters
• Expose a flag: isComplete that tells whether all the input boxes are filled or not
• Expose a state variable: currentFocusedIndex. It tells us the currently focused index of the passcode component.
• Exposes event handlers that can be seamlessly used with the input element.
• Passcode value can be pasted partially, fully, from start, or from middle.

API

The usePasscode hook accepts following props

The hook returns an object that consists of:

License

React is MIT licensed.