otp-timer

A tiny React countdown timer for OTP screens. It counts down, then swaps itself for a Resend button that restarts the timer.

• Works with React 16.8 through 19
• Zero dependencies, ~2 KB
• TypeScript types included
• ESM and CommonJS builds

Demo

927tanmay.github.io/otp-timer

Install

npm install otp-timer

Usage

import OtpTimer from "otp-timer";

export default function VerifyOtp() {
  const handleResend = () => {
    // request a new OTP here
  };

  return <OtpTimer minutes={1} seconds={0} resend={handleResend} />;
}

A named export is also available: import { OtpTimer } from "otp-timer".

Props

Behaviour

| Prop | Description | Default | Example | | :----------- | :------------------------------------------------------------- | :------------- | :-------------------------- | | minutes | Minutes to count down from | 0 | minutes={1} | | seconds | Seconds to count down from (values over 59 roll into minutes) | 30 | seconds={20} | | resend | Called when the resend button is clicked; the timer restarts | – | resend={handleResend} | | text | Label shown before the countdown | "Time left:" | text="Code expires in" | | ButtonText | Resend button content | "Resend" | ButtonText="Send again" |

Styling

| Prop | Description | Default | Example | | :---------------- | :------------------------------ | :---------- | :--------------------------------- | | textColor | Timer text color | "#000000" | textColor="#333" | | buttonColor | Resend button text color | "#fff" | buttonColor="#fff" | | background | Resend button background color | "#0033cc" | background="#0033cc" | | buttonClassName | Class name for the button | – | buttonClassName="btn" | | buttonStyle | Inline styles for the button | – | buttonStyle={{ padding: 8 }} | | timerSpanClass | Class name for the timer text | – | timerSpanClass="timer" | | timerSpanStyle | Inline styles for the timer text| – | timerSpanStyle={{ fontWeight: 600 }} |

Upgrading from v2

See CHANGELOG.md. For most apps, no code changes are needed.

Development

npm install
npm run dev     # example app at http://localhost:5173
npm test
npm run build

License

MIT © Simran Gupta & Tanmay Sharma