otp-validator-react/README.md

A customizable OTP input validator for React

# 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 (
    <div>
      <h1>Enter OTP</h1>
      <OTPValidator 
        length={6}
        onComplete={handleComplete}
        isValid={isValid}
        errorMessage="Please enter the correct OTP"
      />
    </div>
  );
}

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;
}