# beecode-otp-ui

> OTP Frontend UI

Latest version **1.0.4** (published 2024-02-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install beecode-otp-ui
pnpm add beecode-otp-ui
yarn add beecode-otp-ui
bun add beecode-otp-ui
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2024-02-25 |
| First published | 2024-02-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 5.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | beecodeguy |
| Maintainers | beecodeguy |
| Keywords | react, nextjs, otp, headlessUI |

## Links

- npm: https://www.npmjs.com/package/beecode-otp-ui
- Repository: https://github.com/beecodeguy/otp-ui
- Homepage: https://github.com/beecodeguy/otp-ui#readme
- Issues: https://github.com/beecodeguy/otp-ui/issues
- npm.io page: https://npm.io/package/beecode-otp-ui

## Dependencies (5)

- [@babel/core](https://npm.io/package/@babel/core.md) ^7.23.9
- [babel-loader](https://npm.io/package/babel-loader.md) ^9.1.3
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.23.9
- [@rollup/plugin-babel](https://npm.io/package/@rollup/plugin-babel.md) ^6.0.4
- [rollup-plugin-postcss](https://npm.io/package/rollup-plugin-postcss.md) ^4.0.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2024-02-25
- 1.0.3 — 2024-02-25
- 1.0.2 — 2024-02-25
- 1.0.1 — 2024-02-25
- 1.0.0 — 2024-02-25

## README

# 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)

---
_Source: https://npm.io/package/beecode-otp-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._