# beecode-otp-ui

This is simple Functional React Component that renders a set of `Input Fields` for entering `One Time Password (OTP)`.

## Inputs

- `otpFieldCount`: The number of OTP input fields to render.
- `handleOTPVerification`: A function to handle OTP verification. It takes the OTP code as a parameter `(optional)`.
- `error`: An optional error message to display.
- `className`: An optional CSS class name for styling.

- It also handles the `keystrokes` like `backspace` and `delete`

### Usage

**npm**
`npm install beecode-otp-ui`

**yarn**
`yarn add beecode-otp-ui`

```
import { OTPUI } from "beecode-otp-ui";

export default ReactComponent () {
  return {
    <OTPUI
      optFieldCount={3}
     />
  }
}
```

## Props

`otpFieldCount` -> `number` -> `required` -> Number of input fields required for OTP (Most used otps are of `4` or `6` nos)

`handleOTPVerification` -> `(OTPCode: string) => void` -> `optional` -> This function gets triggered once all the input fields are filled up. This will catch the entered value as string.

`error` -> `string` -> `optional` -> This will show the error message if passed

`className` -> `string` -> `optional` -> Any styles to overwrite (works with tailwindcss and tailwind-merge)