@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

Issues

You are welcome to create an issue.

Stay in touch

• Author - Siam Ahnaf
• Website - https://www.siamahnaf.com/
• Github - https://github.com/siamahnaf