@siamf/otp-timer

A simple and customizable react otp timer & input component with typescript support. very simple and more customizable design and smallest bundle size. You can use this component into any react and nextjs projects.

• SSR Friendly
• Customizable
• TypeScript Support
• Smallest Bundle Size(About 13kb)
• Otp Timer & Otp Input Component

Installation

$ npm i @siamf/otp-timer

Demo

Usage?

OtpTimer Component

import { OtpTimer } from "@siamf/otp-timer";

const MyComponent = () => {

  const handleResend = () => {
    //desired function to be performed on clicking resend button
  }

  return (
    <div>
      <OtpTimer
          minutes={0}
          seconds={30}
          onResend={handleResend}
          renderText={(props) => <p>You can resend code in {props.minutes} minutes and {props.seconds} seconds</p>}
          renderButton={(props) => <button {...props}>
              Send Code Again
          </button>}
      />
    </div>
  );
};

export default MyComponent;

OtpInput Component

import { useState } from "react";
import { OtpInput } from "@siamf/otp-timer";

export default function App() {
  const [otp, setOtp] = useState<string>(");

  return (
    <OtpInput
      value={otp}
      onChange={setOtp}
      numInputs={4}
      renderSeparator={<span>-</span>}
      renderInput={(props) => <input {...props} />}
    />
  );
}

Customization

OtpTimer component

Options

name	Description	Default Value
seconds	number of seconds for which timer must be set	30
minutes	number of minutes for which the timer must be set	0
onResend	function that would get triggered on clicking the resend button	n/a
renderText	Customizable text content(See Example Code)	Required
renderButton	Customizable button content(See Example Code)	Required

OtpInput component

You can also pass a function that returns a component, where the function will get the index of the separator being rendered as an argument.

Name	Type	Required	Default	Description
numInputs	number	true	4	Number of OTP inputs to be rendered.
renderInput	function	true	none	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 (Overriding these props is not recommended because it might lead to some unexpected behaviour). index is the index of the input being rendered.
onChange	function	true	console.log	Returns OTP code typed in inputs.
onPaste	function	false	none	Provide a custom onPaste event handler scoped to the OTP inputs container. Executes when content is pasted into any OTP field. Example: const handlePaste: React.ClipboardEventHandler = (event) => { const data = event.clipboardData.getData('text'); console.log(data) };
value	string / number	true	''	The value of the OTP passed into the component.
placeholder	string	false	none	Specify an expected value of each input. The length of this string should be equal to numInputs.
renderSeparator	component / function	false	none	Provide a custom separator between inputs by passing a component. For instance, <span>-</span> would add - between each input.
containerStyle	style (object) / className (string)	false	none	Style applied or class passed to container of inputs.
inputStyle	style (object) / className (string)	false	none	Style applied or class passed to each input.
inputType	<input> type	false	text	The type of the input that will be passed to the input element being rendered. In v2 isInputNum used to set the input type as tel and prevented non numerical entries, so as to avoid the spin buttons added to the inputs with input type number. That behaviour is still supported if you pass tel to the inputType prop.
shouldAutoFocus	boolean	false	false	Auto focuses input on initial page load.
skipDefaultStyles	boolean	false	false	The component comes with default styles for legacy reasons. Pass true to skip those styles. This prop will be removed in the next major release.

Issues

You are welcome to create an issue.

Connect with me