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 | Prop Name | Type | Description | |---------------- |------------------------ |----------------------------------------------------------------------- | | count | number | Number of input boxes to create in the passcode component | | isAlphaNumeric | boolean | If true, allows to enter alpha numeric value in the component |

The hook returns an object that consists of:

| Property | Type | Description | | ---------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | passcode | (string \| number)[] | The current array value of the entire component. | | setPasscode | function | A function that sets the internal state variable:passcode's value inside the hook. | | currentFocusedIndex | number | Index of the currently focused input element. | | setCurrentFocusedIndex | function | A function that sets the internal state variable: currentFocusedIndex's value inside the hook. | | getEventHandler | function | A function that accepts an index as a parameter. It returns the following event handlers for the input positioned at index i: onChange onFocus onKeyUp onKeyDown onPaste | | refs | React.MutableRefObject<HTMLInputElement[] \| []> | A ref array that contains reference of all the input boxes. | | isComplete | boolean | A boolean flag that tells if all the input boxes are filled or not. |

License

React is MIT licensed.