@mikesha/react-verification-code-input

A customizable React component for verification code input fields commonly used in two-factor authentication (2FA), OTP verification, and security code confirmation workflows.

Originally forked from react-verification-code-input, but completely reworked with TypeScript support, accessibility improvements, and modern React patterns.

Support me

If you like what I'm doing, please support me: https://ko-fi.com/mykeshato

Features

• 📱 Mobile-friendly with keyboard support
• ⌨️ Keyboard navigation between fields
• 🔤 Support for both text and numeric inputs
• 🎨 Highly customizable styling
• ♿ Built with accessibility in mind
• 🧩 TypeScript support with full type definitions
• 🔄 Built-in loading state

Installation

# npm
npm install --save @mikesha/react-verification-code-input

# yarn
yarn add @mikesha/react-verification-code-input

# pnpm
pnpm add @mikesha/react-verification-code-input

Basic Usage

import React from 'react';
import ReactCodeInput from '@mikesha/react-verification-code-input';

function VerificationForm() {
  const handleComplete = (code) => {
    console.log('Completed code:', code);
    // Submit code to your verification API
  };

  return (
    <div>
      <h2>Enter verification code</h2>
      <ReactCodeInput fields={6} onComplete={handleComplete} />
    </div>
  );
}

Advanced Usage

import React, { useRef } from 'react';
import ReactCodeInput, { ReactCodeInputRefInstance } from '@mikesha/react-verification-code-input';

function AuthenticationForm() {
  const codeInputRef = useRef < ReactCodeInputRefInstance > null;

  const handleChange = (value) => {
    console.log('Current value:', value);
  };

  const handleComplete = (code) => {
    console.log('Completed code:', code);
    // Verify the code
  };

  const resetCode = () => {
    codeInputRef.current?.clearValues();
  };

  return (
    <div className="auth-form">
      <h2>Two-Factor Authentication</h2>
      <p>Enter the 6-digit code sent to your device</p>

      <ReactCodeInput
        ref={codeInputRef}
        fields={6}
        type="number"
        onChange={handleChange}
        onComplete={handleComplete}
        className="verification-code-container"
        inputClassNames="verification-code-input"
        placeholder="0"
      />

      <div className="form-actions">
        <button onClick={resetCode}>Clear</button>
        <button>Resend Code</button>
      </div>
    </div>
  );
}

Props

| Prop | Type | Default | Description | | ------------------ | ------------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | type | 'text' \| 'number' | 'number' | Input type. When set to 'number', only numeric inputs are accepted. | | fields | number | 6 | Number of input fields to display. | | onChange | (value: string) => void | undefined | Callback triggered whenever any input value changes. Returns concatenated string of all values. | | onComplete | (value: string) => void | undefined | Callback triggered when all fields have been filled. Returns concatenated string of all values. | | autoFocus | boolean | true | Automatically focus the first input field when component mounts. | | loading | boolean | false | Shows a loading indicator over the input fields. | | loadingComponent | JSX.Element | Built-in loader | Custom loading component to display when loading is true. | | className | string | '' | CSS class applied to the main container. | | inputClassNames | string \| string[] | [] | CSS class(es) applied to input fields. If a string is provided, it's applied to all fields. If an array, each item is applied to the corresponding field. | | values | string \| string[] | undefined | Pre-filled values for the input fields. Can be a string (which will be split across fields) or an array of individual values. | | disabled | boolean | false | Disables all input fields. | | required | boolean | false | Sets all input fields as required for form validation. | | placeholder | string \| string[] | [] | Placeholder text for input fields. If a string is provided, it's applied to all fields. If an array, each item is applied to the corresponding field. | | id | string | undefined | Base ID for input fields. Each field will have this base ID appended with its index (e.g., my-code-0, my-code-1). |

Methods

The component exposes methods through a ref:

| Method | Description | | --------------- | ---------------------------------------------------- | | clearValues() | Clears all input fields and focuses the first field. |

To use these methods, create a ref and pass it to the component:

const codeInputRef = useRef(null);

// Later in your component:
<button onClick={() => codeInputRef.current.clearValues()}>
  Reset Code
</button>

<ReactCodeInput ref={codeInputRef} />

Keyboard Navigation

The component supports the following keyboard controls:

• Backspace: Clears the current field and moves focus to the previous field if the current field is empty
• Left Arrow: Moves focus to the previous field
• Right Arrow: Moves focus to the next field
• Typing a character: Automatically moves focus to the next field after input

Styling

The component comes with minimal default styling to handle layout. Apply your own styles using the className and inputClassNames props:

/* Example CSS */
.verification-container {
  margin: 24px 0;
}

.verification-input {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid #ccc;
  text-align: center;
  font-size: 18px;
  margin: 0 4px;
}

.verification-input:focus {
  border-color: #4c84ff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(76, 132, 255, 0.2);
}

TypeScript Support

The package includes TypeScript definitions. Import types when using refs:

import ReactCodeInput, { ReactCodeInputRefInstance, ReactCodeInputProps } from '@mikesha/react-verification-code-input';

// Use in your component
const codeInputRef = useRef<ReactCodeInputRefInstance>(null);

const customProps: ReactCodeInputProps = {
  fields: 4,
  type: 'text'
  // other props...
};

return <ReactCodeInput {...customProps} ref={codeInputRef} />;

Examples

OTP Verification Form

import React, { useState } from 'react';
import ReactCodeInput from '@mikesha/react-verification-code-input';

function OTPVerification() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleComplete = async (code) => {
    setLoading(true);
    setError('');

    try {
      // Example API call
      const response = await verifyOTP(code);
      if (response.success) {
        // Navigate to next screen or show success
      } else {
        setError('Invalid verification code');
      }
    } catch (err) {
      setError('Failed to verify code. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="otp-form">
      <h2>Verify Your Account</h2>
      <p>We've sent a verification code to your phone</p>

      <ReactCodeInput fields={6} onComplete={handleComplete} loading={loading} className="otp-container" />

      {error && <div className="error-message">{error}</div>}
    </div>
  );
}

Customizing the Loading Component

import React from 'react';
import ReactCodeInput from '@mikesha/react-verification-code-input';

const CustomLoader = () => (
  <div className="custom-loader">
    <div className="spinner"></div>
    <p>Verifying...</p>
  </div>
);

function VerificationWithCustomLoader() {
  return <ReactCodeInput fields={4} loading={true} loadingComponent={<CustomLoader />} />;
}

Browser Support

Works in all modern browsers (Chrome, Firefox, Safari, Edge).

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © MikeSha