OTP Validator Component

A customizable OTP (One-Time Password) input validator for React applications.

Installation

npm install otp-validator-react

Usage

import React, { useState } from 'react'; import OTPValidator from 'otp-validator-react';

function App() { const [isValid, setIsValid] = useState(true);

const handleComplete = (code) => { console.log('OTP entered:', code); // Add your validation logic here setIsValid(code === '123456'); // Example validation };

return ( Enter OTP ); }

export default App;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | length | number | 6 | Number of OTP digits | | autoSubmit | boolean | true | Automatically submit when last digit is entered | | onComplete | function | required | Callback when OTP is complete | | inputClassName | string | 'otp-input' | CSS class for input elements | | containerClassName | string | 'otp-container' | CSS class for container div | | errorClassName | string | 'otp-error' | CSS class for error message | | errorMessage | string | 'Invalid OTP' | Error message to display | | isValid | boolean | true | Whether the OTP is valid |

Styling

You can style the component by passing your own class names or by targeting these default classes:

.otp-input { /* Your styles here */ }

.otp-container { /* Your styles here */ }

.otp-error { color: red; margin-top: 8px; }