react-native-otp-fields 1.0.0 → 1.0.1
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 +61 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,66 @@
|
|
|
1
1
|
# react-native-otp-fields
|
|
2
2
|
|
|
3
|
-
A customizable React Native OTP input component with smooth focus handling, digit-only validation, and easy integration for verification codes, PINs, or passcodes.
|
|
3
|
+
A simple and customizable **React Native OTP input component** with smooth focus handling, digit-only validation, and easy integration for verification codes, PINs, or passcodes.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## 📦 Installation
|
|
12
|
+
|
|
13
|
+
### Using npm
|
|
6
14
|
```sh
|
|
7
15
|
npm install react-native-otp-fields
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
### Using Yarn
|
|
19
|
+
```
|
|
20
|
+
yarn add react-native-otp-fields
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### 🚀 Usage
|
|
24
|
+
```
|
|
25
|
+
import React from 'react';
|
|
26
|
+
import { View } from 'react-native';
|
|
27
|
+
import OtpInput from 'react-native-otp-fields';
|
|
28
|
+
|
|
29
|
+
export default function App() {
|
|
30
|
+
return (
|
|
31
|
+
<View style={{ marginTop: 50 }}>
|
|
32
|
+
<OtpInput
|
|
33
|
+
length={6}
|
|
34
|
+
onOtpComplete={(code) => console.log('Entered OTP:', code)}
|
|
35
|
+
/>
|
|
36
|
+
</View>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### ⚙️ Props
|
|
42
|
+
| Prop | Type | Default | Description |
|
|
43
|
+
| ---------------- | ---------- | ------- | ----------------------------------------- |
|
|
44
|
+
| `length` | `number` | `6` | Number of OTP input fields |
|
|
45
|
+
| `onOtpComplete` | `function` | — | Callback fired when all fields are filled |
|
|
46
|
+
| `inputStyle` | `object` | — | Custom style for each input box |
|
|
47
|
+
| `containerStyle` | `object` | — | Custom style for container |
|
|
48
|
+
|
|
49
|
+
### 🎨 Custom Styling Example
|
|
50
|
+
```
|
|
51
|
+
<OtpInput
|
|
52
|
+
length={4}
|
|
53
|
+
onOtpComplete={(code) => console.log(code)}
|
|
54
|
+
inputStyle={{
|
|
55
|
+
borderWidth: 2,
|
|
56
|
+
borderColor: '#4CAF50',
|
|
57
|
+
borderRadius: 10,
|
|
58
|
+
fontSize: 22,
|
|
59
|
+
color: '#4CAF50',
|
|
60
|
+
}}
|
|
61
|
+
containerStyle={{
|
|
62
|
+
justifyContent: 'center',
|
|
63
|
+
marginVertical: 20,
|
|
64
|
+
}}
|
|
65
|
+
/>
|
|
66
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-otp-fields",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "A customizable React Native OTP input component with smooth focus handling, digit-only validation, and easy integration for verification codes, PINs, or passcodes.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|