Features

Dynamic generation of OTP input fields

Customizable input styles

Automatic focus transition between inputs

Support for controlled and uncontrolled input modes

Accessible and keyboard-friendly

Installation

Install the package using npm:

npm install react-dynamic-otp-inputs

# Usage
Here's a basic example of how to use the OtpInput component:

```js
import React from 'react';
import OtpInput from 'react-dynamic-otp-inputs';

const App = () => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
    console.log(`Input at index ${index} changed to ${e.target.value}`);
  };

  return (
    <div>
      <h2>Enter OTP</h2>
      <OtpInput
        numberOfInputFields={6}
        inputBoxStyle={{ border: '1px solid #ccc', padding: '10px', fontSize: '18px' }}
        onchange={handleChange}
      />
    </div>
  );
};

export default App;

Props

| Prop Name | Type | Default | Description | | --------------------- | ----------------------------------------------------------------- | ----------- | -------------------------------------------------------------------------- | | numberOfInputFields | number | 4 | Specifies how many OTP input boxes to render. | | inputBoxStyle | React.CSSProperties | | Optional inline styles to customize each input box. | | onchange | (e: React.ChangeEvent<HTMLInputElement>, index: number) => void | () => {} | Callback function that triggers when the value in any input field changes. |