List of exported Components:

HeadlessOtpInput

This is the OTP input component with no inherit styles. user will have to provide styles to the component.

In this OTP input component, we can pass number of inputs with the prop numInputs.

We need to use the HTML input element to render the boxes. if we need to add a wrapper to input components with help of renderInput prop.

Here is the list of all available props for the HeadlessOtpInput

numInputs:number: Number of OTP inputs to be rendered.

renderInput:function: A function that returns the input that is supposed to be rendered for each of the input fields. The function will get two arguments: inputProps and index. inputProps is an object that contains all the props that should be passed to the input being rendered index is the index of the input being rendered.

onChange:function: Returns OTP code typed in inputs.

value: string/number: The value of the OTP passed into the component.

placeholder:string: Specify an expected value of each input. The length of this string should be equal to numInputs.

renderSeparator:component/function: Provide a custom separator between inputs by passing a component. For instance, - would add - between each input.

containerStyle:style (object)/className (string): Style applied or class passed to container of inputs.

inputStyle:style (object)/className (string): Style applied or class passed to each input.

inputType:<input> type: The type of the input that will be passed to the input element being rendered.

shouldAutoFocus: boolean: This is optional prop and it Auto focuses input on initial page load.

Sample Code Demo

import React, { useState } from "react";
import { HeadlessOTPInput } from "@locoworks/reusejs-react-otp-input";

const Sample = () => {
	const [otp, setOtp] = useState("");
	return (
		<div className="flex flex-col items-center gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<HeadlessOTPInput
				value={otp}
				onChange={setOtp}
				numInputs={6}
				renderSeparator={null}
				renderInput={(props: any) => <input {...props} />}
				containerStyle="gap-2"
				inputStyle="w-12 h-14 bg-slate-300 text-center border rounded-xl text-2xl font-semibold"
			/>
		</div>
	);
};

export default Sample;

ReuseOtpInput

The ReuseOtpInput component extends the functionality of HeadlessOtpInput by providing additional features and default styling options, which can be overridden to customize components according to your specific use case.

User can pass the custom styles using this prop inputClassName: "w-12 h-14 bg-slate-300 border rounded-xl text-2xl font-semibold".

By leveraging these props, users can fully customize the ReuseOtpInput component to suit their specific requirements and design preferences.

Automatically populate the OTP field when the user copies the OTP from an SMS and selects it from the keypad, eliminating the need for manual input.

ReuseExample

import React, { useState } from "react";
import { ReuseOTPInput } from "@locoworks/reusejs-react-otp-input";

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

	return (
		<div className="flex flex-col items-center gap-x-3 justify-center py-10 mt-10  bg-gray-50">
			<ReuseOTPInput
				value={otp}
				onChange={setOtp}
				numInputs={5}
				renderSeparator={null}
				renderInput={(props: any) => <input {...props} />}
				inputClassName="border-red-600 text-center"
				containerStyle="gap-2"
			/>
		</div>
	);
};

export default ReuseExample;

ReuseNumberExample

This example demonstrates an OTP component that accepts only number type values.

We have added css to hide the default html number arrows (up and down)

  • It won't support the Copy and paste of the OTP value.
import React, { useState } from "react";
import { ReuseOTPInput } from "@locoworks/reusejs-react-otp-input";

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

	return (
		<div className="flex flex-col items-center gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseOTPInput
				value={otp}
				onChange={setOtp}
				numInputs={4}
				renderSeparator={null}
				renderInput={(props: any) => (
					<input
						{...props}
						onWheel={(event) => {
							event.preventDefault();
						}}
					/>
				)}
				inputClassName="text-center"
				containerStyle="gap-2"
				inputType="number"
			/>
		</div>
	);
};

export default ReuseNumberExample;

ReuseNumberWithPasteExample

This example demonstrating the accepting the only number type values with support the past the values.

import React, { useState } from "react";
import { ReuseOTPInput } from "@locoworks/reusejs-react-otp-input";

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

	return (
		<div className="flex flex-col items-center gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseOTPInput
				value={otp}
				onChange={setOtp}
				numInputs={4}
				renderSeparator={null}
				renderInput={(props: any) => (
					<input
						{...props}
						onWheel={(event) => {
							event.preventDefault();
						}}
						type="number"
					/>
				)}
				inputClassName="text-center"
				containerStyle="gap-2"
			/>
		</div>
	);
};

export default ReuseNumberWithPasteExample;

Email Verification

We have made a email verification component using ReuseOTPInput.Just give the email and add the functionality to this component and you can use it in your application.

Email Verification

We have sent a code to your email ab**@xyz.com

Didn't recieve code?

Resend
import React, { useState } from "react";
import { ReuseOTPInput } from "@locoworks/reusejs-react-otp-input";

const EmailVerification = () => {
	const [otp, setOtp] = useState("");
	const email = "ab**@xyz.com";

	return (
		<div className="flex flex-col items-center gap-x-3 justify-center py-10 mt-10  bg-gray-50">
			<div className="flex flex-col items-center justify-center text-center space-y-2">
				<div className="font-semibold text-3xl">
					<p>Email Verification</p>
				</div>
				<div className="flex flex-row text-sm font-medium text-gray-400">
					<p>We have sent a code to your email {email}</p>
				</div>
			</div>
			<ReuseOTPInput
				value={otp}
				onChange={setOtp}
				numInputs={5}
				renderSeparator={null}
				renderInput={(props: any) => <input {...props} />}
				inputClassName="w-16 h-16 flex flex-col items-center justify-center text-center px-5 outline-none rounded-xl border border-gray-200 text-lg bg-white focus:bg-gray-50 focus:ring-1 ring-blue-700"
				containerStyle="gap-2"
			/>
			<div className="flex flex-col space-y-5">
				<div>
					<button className="flex flex-row items-center mt-5 justify-center text-center w-full border rounded-xl outline-none py-5 bg-blue-700 border-none text-white text-sm shadow-sm">
						Verify Account
					</button>
				</div>

				<div className="flex flex-row items-center justify-center text-center text-sm font-medium space-x-1 text-gray-500">
					<p>{`Didn't recieve code?`}</p>{" "}
					<a
						className="flex flex-row items-center text-blue-600"
						href="http://"
						target="_blank"
						rel="noopener noreferrer"
					>
						Resend
					</a>
				</div>
			</div>
		</div>
	);
};

export default EmailVerification;

Round and Color Fill

We made this OTP component to have a beautiful rose color background with red borders on focus which you can customize to whatever color you want in inputClassname prop. Also the OTP container is made to be rounded. This component has inputClassName prop with the following style: inputClassName="rounded-full text-center flex flex-col items-center justify-center text-center outline-none text-white-600 focus:bg-rose-200 focus:ring-1 focus-text-white-600 ring-red-300"

import React, { useState } from "react";
import { ReuseOTPInput } from "@locoworks/reusejs-react-otp-input";

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

	return (
		<div className="flex flex-col items-center gap-x-3 justify-center py-10 mt-10  bg-gray-50">
			<ReuseOTPInput
				value={otp}
				onChange={setOtp}
				numInputs={5}
				renderSeparator={null}
				renderInput={(props: any) => <input {...props} />}
				inputClassName="rounded-full text-center flex flex-col items-center justify-center text-center outline-none text-white-600 focus:bg-rose-200 focus:ring-1 focus-text-white-600 ring-red-300"
				containerStyle="gap-2 rounded-full"
			/>
		</div>
	);
};

export default ColorFill;