use-fancy-input

⚠️ Not yet 1.0. Many things are subject to change. Documentation is a work in progress. Try it out and give feedback!

React hook for building fancy input for things like OTP, 2FA Code, etc.

Checkout the Storybook for examples.

Demo

Source code behind the GIF above

import { useFancyInput } from "use-fancy-input";

const MyComponent = () => {
    const { containerRef, inputs } = useFancyInput({ length: 5 });

    return (
        <StyledDiv ref={containerRef}>
            {inputs.map((input) => {
                return <StyledInput {...input.getInputProps()} />;
            })}
        </StyledDiv>
    );
};

Installation

npm install use-fancy-input

OR

yarn add use-fancy-input