react-otp-input-hook
TypeScript icon, indicating that this package has built-in type declarations

1.0.10 • Public • Published
React OTP Input Hook

npm npm NPM Coverage Status Build Status

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>
  );
}

Basic component output

Dependencies (0)

    Dev Dependencies (16)

    Package Sidebar

    Install

    npm i react-otp-input-hook

    Weekly Downloads

    271

    Version

    1.0.10

    License

    MIT

    Unpacked Size

    22.4 kB

    Total Files

    10

    Last publish

    Collaborators

    • supercoder123