React Otp Input Hook

A simple react hook to create otp inputs with ease. Inspired by libraries like react-hook-form, downshift-js ...etc

Features

• No dependencies (only needs react as peer dependency)
• Small size
• Easy to use
• Does not come with any styling so you are free to use any input component of your own. (refs need to be forwarded)
• Written in typescript
• Lots of options
• Works with many libraries

Docs: https://supercoder123.github.io/react-otp-input-docs/

Installation

npm i react-otp-input-hook

Usage

import { useOtpInput } from "react-otp-input-hook";

const BasicOTPComponent = ({ onChange }: { onChange: (val: string) => void }) => {
  const { register } = useOtpInput({
    onInputValueChange: onChange,
  });

  const defaultOptions = { required: true };

  return (
    <div style={{ padding: '10px' }}>
      <input {...register("digit-1", defaultOptions)} />
      <input {...register("digit-2", defaultOptions)} />
      <input {...register("digit-3", defaultOptions)} />
      <input {...register("digit-4", defaultOptions)} />
      <input {...register("digit-5", defaultOptions)} />
    </div>
  );
};

Use Inside any form

function App() {
  const [value, setValue] = useState("");

  return (
    <div>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          console.log('Value', value);
        }}
      >

        <BasicOTPComponent
          onChange={(value: any) => {
            console.log(value);
            setValue(value);
          }}
        />

        <button
          type="submit"
        >
          Submit
        </button>
      </form>

      <div>{value}</div>
    </div>
  );
}