custom-simple-otp 0.0.2 → 0.0.4
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 +57 -1
- package/image.png +0 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# React OTP Input Component
|
|
2
2
|
|
|
3
|
+
|
|
4
|
+
|
|
3
5
|
|
|
4
6
|
|
|
5
7
|
|
|
@@ -21,4 +23,58 @@ A lightweight, accessible, and customizable OTP (One-Time Password) input compon
|
|
|
21
23
|
## 📦 Installation
|
|
22
24
|
|
|
23
25
|
```bash
|
|
24
|
-
npm i custom-simple-otp
|
|
26
|
+
npm i custom-simple-otp
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
📖 Props
|
|
30
|
+
Prop Type Required Default Description
|
|
31
|
+
length number No 4 Number of OTP input fields (1-10)
|
|
32
|
+
onSubmit (otp: number) => void Yes - Callback when all fields are filled
|
|
33
|
+
isDisable boolean No false Disables all input fields
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
🎨 Styling
|
|
37
|
+
The component uses CSS classes that you can easily override:
|
|
38
|
+
|
|
39
|
+
Default CSS Classes
|
|
40
|
+
|
|
41
|
+
.otp-container {
|
|
42
|
+
display: flex;
|
|
43
|
+
gap: 10px;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.otp-input-field {
|
|
48
|
+
width: 50px;
|
|
49
|
+
height: 50px;
|
|
50
|
+
text-align: center;
|
|
51
|
+
font-size: 24px;
|
|
52
|
+
border: 2px solid #e2e8f0;
|
|
53
|
+
border-radius: 8px;
|
|
54
|
+
transition: all 0.2s ease;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.otp-input-field:focus {
|
|
58
|
+
outline: none;
|
|
59
|
+
border-color: #4f46e5;
|
|
60
|
+
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.otp-input-field:disabled {
|
|
64
|
+
background-color: #f7fafc;
|
|
65
|
+
cursor: not-allowed;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
⌨️ Keyboard Navigation
|
|
70
|
+
The component supports full keyboard navigation:
|
|
71
|
+
|
|
72
|
+
Key Action
|
|
73
|
+
Arrow Right (→) Move to next input field
|
|
74
|
+
Arrow Left (←) Move to previous input field
|
|
75
|
+
Backspace Clear current field and move to previous
|
|
76
|
+
Delete Clear current field
|
|
77
|
+
Tab Navigate through fields (standard tab order)
|
|
78
|
+
Shift + Tab Navigate backwards
|
|
79
|
+
Numbers (0-9) Input digit and auto-advance
|
|
80
|
+
Paste Paste digits (fills multiple fields)
|
package/image.png
ADDED
|
Binary file
|