https://github.com/driaug/otp

Minimalistic one-time password component for React, built with Tailwind and Typescript.
https://github.com/driaug/otp

react tailwind typescript

Last synced: 10 days ago
JSON representation

Minimalistic one-time password component for React, built with Tailwind and Typescript.

• Host: GitHub
• URL: https://github.com/driaug/otp
• Owner: driaug
• License: unlicense
• Created: 2023-08-08T17:10:33.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-06-06T12:42:44.000Z (5 months ago)
• Last Synced: 2024-10-11T10:51:15.195Z (26 days ago)
• Topics: react, tailwind, typescript
• Homepage: https://otp.driaug.com
• Size: 96.7 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# OTP Component

A minimalistic one-time password component for React, built with Tailwind and Typescript.

Includes support for various OTP needs such as:

- 🗑️ Backspace & delete

- 🖨️ Copy & Paste

- ⇥ Accessibility with tab

![Alt text](./assets/image.png)

## Basic Usage

- Copy the [component](./demo/src/components/OTP.tsx) to your own project

```tsx

 console.log(otp)} />

```

## Parameters

| Parameter  | Type             | Use                                                       |

|------------|------------------|-----------------------------------------------------------|

| onComplete | `(otp) => void;` | Function that will trigger once the password is filled in |

| length     | `number`         | Number of boxes, defaults to `6`                          |

| disabled   | `boolean`        | Disables the input, defaults to `false`                   |