custom-simple-otp 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +78 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
# React OTP Input Component
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
A lightweight, accessible, and customizable OTP (One-Time Password) input component for React applications. Perfect for authentication flows, 2FA verification, and multi-digit code inputs.
|
|
9
|
+
|
|
10
|
+
## ✨ Features
|
|
11
|
+
|
|
12
|
+
- 🔢 **Automatic Navigation** - Auto-focuses next field on input
|
|
13
|
+
- ⌨️ **Full Keyboard Support** - Arrow keys, Backspace, Tab navigation
|
|
14
|
+
- ♿ **Accessibility Focused** - Screen reader friendly
|
|
15
|
+
- 📱 **Mobile Optimized** - Large touch targets, numeric keyboard
|
|
16
|
+
- 🎨 **Easy to Style** - Customizable CSS classes
|
|
17
|
+
- ⚡ **Zero Dependencies** - Lightweight and fast
|
|
18
|
+
- ✅ **Input Validation** - Only accepts numeric values
|
|
19
|
+
- 🔄 **TypeScript Ready** - Full type definitions included
|
|
20
|
+
|
|
21
|
+
## 📦 Installation
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm i custom-simple-otp
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
📖 Props
|
|
28
|
+
Prop Type Required Default Description
|
|
29
|
+
length number No 4 Number of OTP input fields (1-10)
|
|
30
|
+
onSubmit (otp: number) => void Yes - Callback when all fields are filled
|
|
31
|
+
isDisable boolean No false Disables all input fields
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
🎨 Styling
|
|
35
|
+
The component uses CSS classes that you can easily override:
|
|
36
|
+
|
|
37
|
+
Default CSS Classes
|
|
38
|
+
|
|
39
|
+
.otp-container {
|
|
40
|
+
display: flex;
|
|
41
|
+
gap: 10px;
|
|
42
|
+
justify-content: center;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.otp-input-field {
|
|
46
|
+
width: 50px;
|
|
47
|
+
height: 50px;
|
|
48
|
+
text-align: center;
|
|
49
|
+
font-size: 24px;
|
|
50
|
+
border: 2px solid #e2e8f0;
|
|
51
|
+
border-radius: 8px;
|
|
52
|
+
transition: all 0.2s ease;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.otp-input-field:focus {
|
|
56
|
+
outline: none;
|
|
57
|
+
border-color: #4f46e5;
|
|
58
|
+
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.otp-input-field:disabled {
|
|
62
|
+
background-color: #f7fafc;
|
|
63
|
+
cursor: not-allowed;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
⌨️ Keyboard Navigation
|
|
68
|
+
The component supports full keyboard navigation:
|
|
69
|
+
|
|
70
|
+
Key Action
|
|
71
|
+
Arrow Right (→) Move to next input field
|
|
72
|
+
Arrow Left (←) Move to previous input field
|
|
73
|
+
Backspace Clear current field and move to previous
|
|
74
|
+
Delete Clear current field
|
|
75
|
+
Tab Navigate through fields (standard tab order)
|
|
76
|
+
Shift + Tab Navigate backwards
|
|
77
|
+
Numbers (0-9) Input digit and auto-advance
|
|
78
|
+
Paste Paste digits (fills multiple fields)
|