otp-auto-fetch-input

Animated OTP input component for React with WebOTP SMS auto-fetch support.

Install

npm install otp-auto-fetch-input

Usage

import { useState } from "react";
import { OtpInput } from "otp-auto-fetch-input";
import "otp-auto-fetch-input/styles.css";

export default function VerifyOtp() {
  const [otp, setOtp] = useState("");

  return (
    <OtpInput
      length={6}
      value={otp}
      onChange={(next) => setOtp(next)}
      onComplete={(code) => {
        console.log("OTP complete:", code);
      }}
      autoFetch
    />
  );
}

Props

• length (default 6): number of OTP digits.
• value: controlled OTP value.
• onChange(nextValue, source): triggered on manual/paste/WebOTP fill.
• onComplete(otp, source): called when all digits are present.
• autoFetch (default true): enables WebOTP auto-fetch on supported browsers.
• fetchTimeoutMs (default 60000): abort timeout for WebOTP listener.
• autoFocus (default true): focus first empty digit on mount/update.
• allowPaste (default true): allows full OTP paste.
• disabled: disable input.
• className: wrapper class override.
• inputClassName: slot class override.
• onError(error): receives non-abort WebOTP errors.

WebOTP Notes

• Works only in secure contexts (https) and compatible mobile browsers.
• SMS should include your domain and OTP, for example:

Your verification code is 123456.

@example.com #123456

Semantic Versioning

This package follows SemVer (MAJOR.MINOR.PATCH).

• PATCH: bug fixes (0.1.0 -> 0.1.1)
• MINOR: backward-compatible features (0.1.0 -> 0.2.0)
• MAJOR: breaking API changes (0.1.0 -> 1.0.0)

Release commands:

npm run release:patch
npm run release:minor
npm run release:major

Or let standard-version infer bump type from commits:

npm run release

Publish Pipeline (GitHub Actions)

Automation files:

• .github/workflows/ci.yml: validates build on pull requests and main pushes.
• .github/workflows/publish.yml: publishes to npm on v*.*.* tag pushes.

Required GitHub secret:

• NPM_TOKEN: npm automation token with publish access.

Typical release flow:

# 1) Create version + changelog + tag (example patch)
npm run release:patch

# 2) Push commits and tags
git push --follow-tags

When the vX.Y.Z tag reaches GitHub, publish workflow runs and pushes the package to npm.