@siamf/otp-timer

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

• SSR Friendly
• Customizable
• TypeScript Support
• Smallest Bundle Size(About 13kb)

Installation

$ npm i @siamf/otp-timer

Demo

Usage?

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={5} onResend={handleResend} />
    </div>
  );
};

export default MyComponent;

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
text	content that you want to put down	Resend otp in
ButtonText	button text	Resend
showSpinner	If you want to show any button loading	false
fetching	If you want to show any button loading icon with fetching state	false
spinnerComponent	Your custom spinner component for render	null

Styling

Name	Type	Description
containerClass	string	timer Container class name
textClass	string	text class name
timerClass	string	timer class name
buttonContainerClass	string	button container class
buttonClass	string	button class
buttonStyle	CSSProperties	styles for resend button
buttonContainerStyle	CSSProperties	styles for resend button container
textStyle	CSSProperties	styles for text
timerStyle	CSSProperties	styles for timer
textContainerStyle	CSSProperties	styles for timer text container

Issues

You are welcome to create an issue.

Stay in touch

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