A reusable OTP (One Time Password) input component built with Next.js, Tailwind CSS, and NextUI.

🚨🚨 Project under construction 🚨🚨

OTP NextJs Library

A reusable OTP (One Time Password) input component built with Next.js, Tailwind CSS, and NextUI.

OTP NextJs Library
- Table of Contents
- Installation
  - npm
  - yarn
  - pnpm
- Usage
  - React
  - NextJs
- Props
- Types
- MIT
- Author
  - Samuel Ramos

Installation

You can install the

next-otp

package using one of the following package managers:

npm

If you are using npm as your package manager, you can install

next-otp

by running the following command in your terminal:

npm i next-otp

yarn

If you are using yarn as your package manager, you can install next-otp by running the following command in your terminal:

yarn add next-otp

pnpm

If you are using pnpm as your package manager, you can install next-otp by running the following command in your terminal:

pnpm add next-otp

Usage

React

Here's how you can use the OTP input component in your React project:

import React, { useState } from "react";
import OTP from "otp-next";
import "otp-next/styles.css";

const OTPExample = () => {
  const [otp, setOtp] = useState("");

  const handleComplete = (otp) => {
    console.log("OTP complete:", otp);
    setOtp(otp);
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      <h1 className="text-2xl font-bold">OTP Input Example</h1>
      <OTP onComplete={handleComplete} />
      <p className="mt-4">Entered OTP: {otp}</p>
    </div>
  );
};

export default OTPExample;

Next.js

Here's how you can use the OTP input component in your Next.js project:

"use client"; // NOTE - Client-side rendered component

import React, { useState } from "react";
import OTP from "otp-next";
import "otp-next/styles.css";

const OTPExample = () => {
  const [otp, setOtp] = useState("");

  const handleComplete = (otp: string) => {
    console.log("OTP complete:", otp);
    setOtp(otp);
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      <h1 className="text-2xl font-bold">OTP Input Example</h1>
      <OTP onComplete={handleComplete} />
      <p className="mt-4">Entered OTP: {otp}</p>
    </div>
  );
};

export default OTPExample;

Props

| Prop | Type | Default | Description | | ------------- | ---------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------- | |

length

number

| 6 | Number of characters accepted by the OTP | |

onComplete

(otp: string) => void

null

| Callback function that is called when the OTP input is complete. | |

accept

string

numbers

| The type of characters to accept AcceptType. | |

inputHeight

inputWidth

inputProps

spacing

| SpacingClass | "gap-4" | Define the spacing between the input. |

Types

AcceptType

| Type key | Description | | -------------- | ------------------------------- | |

numbers

| Accept only numbers (0-9) | |

letters

| Accept only letters (a-z, A-Z) | |

alphanumeric

| Accept both numbers and letters |

HeightClass

| Enum key | CSS Property Value Height | | ---------- | ------------------------- | |

h-0

h-1

h-2

h-3

h-4

h-5

h-6

h-7

h-8

h-9

h-10

h-11

h-12

h-14

h-16

h-20

h-24

h-28

h-32

h-36

h-40

h-44

h-48

h-52

h-56

h-60

h-64

h-72

h-80

h-96

h-auto

h-px

h-0.5

h-1.5

h-2.5

h-3.5

h-1/2

h-1/3

h-2/3

h-1/4

h-2/4

h-3/4

h-1/5

h-2/5

h-3/5

h-4/5

h-1/6

h-2/6

h-3/6

h-4/6

h-5/6

h-full

h-screen

h-svh

h-lvh

h-dvh

h-min

h-max

h-fit

| "0px" | | "0.25rem" | | "0.5rem" | | "0.75rem" | | "1rem" | | "1.25rem" | | "1.5rem" | | "1.75rem" | | "2rem" | | "2.25rem" | | "2.5rem" | | "2.75rem" | | "3rem" | | "3.5rem" | | "4rem" | | "5rem" | | "6rem" | | "7rem" | | "8rem" | | "9rem" | | "10rem" | | "11rem" | | "12rem" | | "13rem" | | "14rem" | | "15rem" | | "16rem" | | "18rem" | | "20rem" | | "24rem" | | "auto" | | "1px" | | "0.125rem" | | "0.375rem" | | "0.625rem" | | "0.875rem" | | "50%" | | "33.333333%" | | "66.666667%" | | "25%" | | "50%" | | "75%" | | "20%" | | "40%" | | "60%" | | "80%" | | "16.666667%" | | "33.333333%" | | "50%" | | "66.666667%" | | "83.333333%" | | "100%" | | "100vh" | | "100svh" | | "100lvh" | | "100dvh" | | "min-content" | | "max-content" | | "fit-content" |

WidthClass

| Enum key | CSS Property Value Width | | ---------- | ------------------------ | |

w-0

| "0px" | |

w-1

| "0.25rem" | |

w-2

| "0.5rem" | |

w-3

| "0.75rem" | |

w-4

| "1rem" | |

w-5

| "1.25rem" | |

w-6

| "1.5rem" | |

w-7

| "1.75rem" | |

w-8

| "2rem" | |

w-9

| "2.25rem" | |

w-10

| "2.5rem" | |

w-11

| "2.75rem" | |

w-12

| "3rem" | |

w-14

| "3.5rem" | |

w-16

| "4rem" | |

w-20

| "5rem" | |

w-24

| "6rem" | |

w-28

| "7rem" | |

w-32

| "8rem" | |

w-36

| "9rem" | |

w-40

| "10rem" | |

w-44

| "11rem" | |

w-48

| "12rem" | |

w-52

| "13rem" | |

w-56

| "14rem" | |

w-60

| "15rem" | |

w-64

| "16rem" | |

w-72

| "18rem" | |

w-80

| "20rem" | |

w-96

| "24rem" | |

w-auto

| "auto" | |

w-px

| "1px" | |

w-0.5

| "0.125rem" | |

w-1.5

| "0.375rem" | |

w-2.5

| "0.625rem" | |

w-3.5

| "0.875rem" | |

w-1/2

| "50%" | |

w-1/3

| "33.333333%" | |

w-2/3

| "66.666667%" | |

w-1/4

| "25%" | |

w-2/4

| "50%" | |

w-3/4

| "75%" | |

w-1/5

| "20%" | |

w-2/5

| "40%" | |

w-3/5

| "60%" | |

w-4/5

| "80%" | |

w-1/6

| "16.666667%" | |

w-2/6

| "33.333333%" | |

w-3/6

| "50%" | |

w-4/6

| "66.666667%" | |

w-5/6

| "83.333333%" | |

w-1/12

| "8.333333%" | |

w-2/12

| "16.666667%" | |

w-3/12

| "25%" | |

w-4/12

| "33.333333%" | |

w-5/12

| "41.666667%" | |

w-6/12

| "50%" | |

w-7/12

| "58.333333%" | |

w-8/12

| "66.666667%" | |

w-9/12

| "75%" | |

w-10/12

| "83.333333%" | |

w-11/12

| "91.666667%" | |

w-full

| "100%" | |

w-screen

| "100vw" | |

w-svw

| "100svw" | |

w-lvw

| "100lvw" | |

w-dvw

| "100dvw" | |

w-min

| "min-content" | |

w-max

| "max-content" | |

w-fit

| "fit-content" |

SpacingClass

| Enum key | CSS Property Value Gap | | --------- | ---------------------- | |

gap-0

| "0px" | |

gap-1

| "0.25rem" | |

gap-2

| "0.5rem" | |

gap-3

| "0.75rem" | |

gap-4

| "1rem" | |

gap-5

| "1.25rem" | |

gap-6

| "1.5rem" | |

gap-7

| "1.75rem" | |

gap-8

| "2rem" | |

gap-9

| "2.25rem" | |

gap-10

| "2.5rem" | |

gap-11

| "2.75rem" | |

gap-12

| "3rem" | |

gap-14

| "3.5rem" | |

gap-16

| "4rem" | |

gap-20

| "5rem" | |

gap-24

| "6rem" | |

gap-28

| "7rem" | |

gap-32

| "8rem" | |

gap-36

| "9rem" | |

gap-40

| "10rem" | |

gap-44

| "11rem" | |

gap-48

| "12rem" | |

gap-52

| "13rem" | |

gap-56

| "14rem" | |

gap-60

| "15rem" | |

gap-64

| "16rem" | |

gap-72

| "18rem" | |

gap-80

| "20rem" | |

gap-96

| "24rem" | |

gap-px

| "1px" | |

gap-0.5

| "0.125rem" | |

gap-1.5

| "0.375rem" | |

gap-2.5

| "0.625rem" | |

gap-3.5

OTP Nextjs

TypeScript

OTP NextJs Library

Table of Contents

Installation

npm

yarn

pnpm

Usage

React

Next.js

Props

Types

AcceptType

HeightClass

WidthClass

SpacingClass

MIT

Author

Samuel Ramos