@siamf/otp-timer NPM

@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