@matin_mortazavi/react-otp-input 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/LICENSE +21 -0
- package/README.md +251 -0
- package/example/index.html +14 -0
- package/example/package.json +23 -0
- package/example/src/App.tsx +137 -0
- package/example/src/index.css +216 -0
- package/example/src/main.tsx +10 -0
- package/example/src/vite-env.d.ts +1 -0
- package/example/tsconfig.json +21 -0
- package/example/tsconfig.node.json +9 -0
- package/example/vite.config.ts +8 -0
- package/example/yarn.lock +787 -0
- package/lib/index.cjs +186 -0
- package/lib/index.cjs.map +1 -0
- package/lib/index.d.ts +39 -0
- package/lib/index.esm.js +180 -0
- package/lib/index.esm.js.map +1 -0
- package/package.json +59 -0
- package/rollup.config.js +19 -0
- package/tsconfig.json +21 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2018 - 2023, Devfolio
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,251 @@
|
|
|
1
|
+
# react-otp-input
|
|
2
|
+
|
|
3
|
+
[](https://badge.fury.io/js/react-otp-input) [](https://www.npmjs.com/package/react-otp-input) [](https://www.npmjs.com/package/react-otp-input)
|
|
4
|
+
[](#contributors-)
|
|
5
|
+
|
|
6
|
+
<!-- ALL-CONTRIBUTORS-BADGE:END -->
|
|
7
|
+
|
|
8
|
+
> This is a **fork** of [react-otp-input](https://github.com/devfolioco/react-otp-input). The fork introduces additional features and enhancements such as:
|
|
9
|
+
> - New feature : now you can blur the input with using shouldBlurOnFinish prop (close keyboard on mobile)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
If you're looking for the original package, you can find it [here](https://github.com/devfolioco/react-otp-input).
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
A fully customizable, one-time password input component for the web built with React.
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
[Live Demo](https://devfolioco.github.io/react-otp-input)
|
|
21
|
+
<!--
|
|
22
|
+
[CodeSandbox](https://codesandbox.io/s/react-otp-input-demo-v2-1iy52) -->
|
|
23
|
+
|
|
24
|
+
## Installation
|
|
25
|
+
|
|
26
|
+
[](https://nodei.co/npm/react-otp-input/)
|
|
27
|
+
|
|
28
|
+
#### To install the latest stable version:
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
npm install --save react-otp-input
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Still using v2?
|
|
35
|
+
No problem! You can find the documentation for v2 [here](https://github.com/devfolioco/react-otp-input/tree/v2.4.0)
|
|
36
|
+
|
|
37
|
+
#### Basic usage:
|
|
38
|
+
|
|
39
|
+
```jsx
|
|
40
|
+
import React, { useState } from 'react';
|
|
41
|
+
import OtpInput from 'react-otp-input';
|
|
42
|
+
|
|
43
|
+
export default function App() {
|
|
44
|
+
const [otp, setOtp] = useState('');
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<OtpInput
|
|
48
|
+
value={otp}
|
|
49
|
+
onChange={setOtp}
|
|
50
|
+
numInputs={4}
|
|
51
|
+
renderSeparator={<span>-</span>}
|
|
52
|
+
renderInput={(props) => <input {...props} />}
|
|
53
|
+
/>
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## API
|
|
59
|
+
|
|
60
|
+
<table>
|
|
61
|
+
<tr>
|
|
62
|
+
<th>Name<br/></th>
|
|
63
|
+
<th>Type</th>
|
|
64
|
+
<th>Required</th>
|
|
65
|
+
<th>Default</th>
|
|
66
|
+
<th>Description</th>
|
|
67
|
+
</tr>
|
|
68
|
+
<tr>
|
|
69
|
+
<td>numInputs</td>
|
|
70
|
+
<td>number</td>
|
|
71
|
+
<td>true</td>
|
|
72
|
+
<td>4</td>
|
|
73
|
+
<td>Number of OTP inputs to be rendered.</td>
|
|
74
|
+
</tr>
|
|
75
|
+
<tr>
|
|
76
|
+
<td>renderInput</td>
|
|
77
|
+
<td>function</td>
|
|
78
|
+
<td>true</td>
|
|
79
|
+
<td>none</td>
|
|
80
|
+
<td>A function that returns the input that is supposed to be rendered for each of the input fields.
|
|
81
|
+
The function will get two arguments: <code>inputProps</code> and <code>index</code>. <code>inputProps</code> is an object that contains all the props <b>that should be passed to the input being rendered</b> (Overriding these props is not recommended because it might lead to some unexpected behaviour). <code>index</code> is the index of the input being rendered.
|
|
82
|
+
</td>
|
|
83
|
+
</tr>
|
|
84
|
+
<tr>
|
|
85
|
+
<td>onChange</td>
|
|
86
|
+
<td>function</td>
|
|
87
|
+
<td>true</td>
|
|
88
|
+
<td>console.log</td>
|
|
89
|
+
<td>Returns OTP code typed in inputs.</td>
|
|
90
|
+
</tr>
|
|
91
|
+
<tr>
|
|
92
|
+
<td>onPaste</td>
|
|
93
|
+
<td>function</td>
|
|
94
|
+
<td>false</td>
|
|
95
|
+
<td>none</td>
|
|
96
|
+
<td>Provide a custom onPaste event handler scoped to the OTP inputs container. Executes when content is pasted into any OTP field.
|
|
97
|
+
</br></br>
|
|
98
|
+
Example:
|
|
99
|
+
<pre>
|
|
100
|
+
const handlePaste: React.ClipboardEventHandler<HTMLDivElement> = (event) => {
|
|
101
|
+
const data = event.clipboardData.getData('text');
|
|
102
|
+
console.log(data)
|
|
103
|
+
};</pre>
|
|
104
|
+
|
|
105
|
+
</td>
|
|
106
|
+
</tr>
|
|
107
|
+
<tr>
|
|
108
|
+
<td>value</td>
|
|
109
|
+
<td>string / number</td>
|
|
110
|
+
<td>true</td>
|
|
111
|
+
<td>''</td>
|
|
112
|
+
<td>The value of the OTP passed into the component.</td>
|
|
113
|
+
</tr>
|
|
114
|
+
<tr>
|
|
115
|
+
<td>placeholder</td>
|
|
116
|
+
<td>string</td>
|
|
117
|
+
<td>false</td>
|
|
118
|
+
<td>none</td>
|
|
119
|
+
<td>Specify an expected value of each input. The length of this string should be equal to <code>numInputs</code>.</td>
|
|
120
|
+
</tr>
|
|
121
|
+
<tr>
|
|
122
|
+
<td>renderSeparator</td>
|
|
123
|
+
<td>component / function<br/></td>
|
|
124
|
+
<td>false</td>
|
|
125
|
+
<td>none</td>
|
|
126
|
+
<td>Provide a custom separator between inputs by passing a component. For instance, <code><span>-</span></code> would add <code>-</code> between each input.</td> You can also pass a function that returns a component, where the function will get the index of the separator being rendered as an argument.
|
|
127
|
+
</tr>
|
|
128
|
+
<tr>
|
|
129
|
+
<td>containerStyle</td>
|
|
130
|
+
<td>style (object) / className (string)</td>
|
|
131
|
+
<td>false</td>
|
|
132
|
+
<td>none</td>
|
|
133
|
+
<td>Style applied or class passed to container of inputs.</td>
|
|
134
|
+
</tr>
|
|
135
|
+
<tr>
|
|
136
|
+
<td>inputStyle</td>
|
|
137
|
+
<td>style (object) / className (string)</td>
|
|
138
|
+
<td>false</td>
|
|
139
|
+
<td>none</td>
|
|
140
|
+
<td>Style applied or class passed to each input.</td>
|
|
141
|
+
</tr>
|
|
142
|
+
<tr>
|
|
143
|
+
<td>inputType</td>
|
|
144
|
+
<td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types"><input> type<a></td>
|
|
145
|
+
<td>false</td>
|
|
146
|
+
<td>text</td>
|
|
147
|
+
<td>The type of the input that will be passed to the input element being rendered. In v2 <code>isInputNum</code> used to set the input type as <code>tel</code> and prevented non numerical entries, so as to avoid the spin buttons added to the inputs with input type <code>number</code>. That behaviour is still supported if you pass <code>tel</code> to the inputType prop.</td>
|
|
148
|
+
</tr>
|
|
149
|
+
<tr>
|
|
150
|
+
<td>shouldAutoFocus</td>
|
|
151
|
+
<td>boolean</td>
|
|
152
|
+
<td>false</td>
|
|
153
|
+
<td>false</td>
|
|
154
|
+
<td>Auto focuses input on initial page load.</td>
|
|
155
|
+
</tr>
|
|
156
|
+
<tr>
|
|
157
|
+
<td>skipDefaultStyles</td>
|
|
158
|
+
<td>boolean</td>
|
|
159
|
+
<td>false</td>
|
|
160
|
+
<td>false</td>
|
|
161
|
+
<td>The component comes with default styles for legacy reasons. Pass <code>true</code> to skip those styles. This prop will be removed in the next major release.</td>
|
|
162
|
+
</tr>
|
|
163
|
+
</table>
|
|
164
|
+
|
|
165
|
+
### ⚠️ Warning
|
|
166
|
+
Do not override the following props on the input component that you return from the `renderInput` prop. Doing so might lead to unexpected behaviour.
|
|
167
|
+
- `ref`
|
|
168
|
+
- `value`
|
|
169
|
+
- `onChange`
|
|
170
|
+
- `onFocus`
|
|
171
|
+
- `onBlur`
|
|
172
|
+
- `onKeyDown`
|
|
173
|
+
- `onPaste`
|
|
174
|
+
- `onInput`
|
|
175
|
+
- `type`
|
|
176
|
+
- `inputMode`
|
|
177
|
+
|
|
178
|
+
## Migrating from v2
|
|
179
|
+
|
|
180
|
+
The v3 of `react-otp-input` is a complete rewrite of the library. Apart from making the API more customizable and flexible, this version is a complete rewrite of the library using TypeScript and React Hooks. Here are the breaking changes that you need to be aware of:
|
|
181
|
+
|
|
182
|
+
- You now need to pass your own custom input component that will be rendered for each of the input fields via `renderInput` prop. This gives you the flexibility to customize the input fields as you desire. This also means that props like `focusStyle`, `isDisabled`, `disabledStyle`, `hasErrored`, `errorStyle`, `isInputNum`, `isInputSecure`, `data-cy` and `data-testid` are no longer supported. You can achieve the same functionality and more by passing the relevant props directly to the input component that you return from the `renderInput` prop.
|
|
183
|
+
|
|
184
|
+
- The `separator` prop has now been renamed to `renderSeparator`. This prop now apart from accepting a component that will be rendered as a separator between inputs like it used to, now also accepts a function that returns a component. The function will get the index of the separator being rendered as an argument.
|
|
185
|
+
|
|
186
|
+
- A new prop called `inputType` has been added to the component. This prop can be used to specify the type of the input that will be passed to the input element being rendered. The default value of this prop is `number`.
|
|
187
|
+
|
|
188
|
+
## Migrating from v1
|
|
189
|
+
|
|
190
|
+
`react-otp-input` is now a controlled component to facilitate functionalities that weren't possible before from the application using it, such as clearing or pre-assigning values. For `v1.0.0` and above, a `value` prop needs to be passed in the component for it to function as expected.
|
|
191
|
+
|
|
192
|
+
## Development
|
|
193
|
+
|
|
194
|
+
#### To run the vite example:
|
|
195
|
+
|
|
196
|
+
```
|
|
197
|
+
cd example
|
|
198
|
+
npm run dev
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
## Checklist
|
|
202
|
+
|
|
203
|
+
[](https://github.com/devfolioco/react-otp-input/pulls) [](https://github.com/devfolioco/react-otp-input)
|
|
204
|
+
|
|
205
|
+
- [ ] Write tests
|
|
206
|
+
- [ ] Add actions for lint checks and tests
|
|
207
|
+
|
|
208
|
+
## Contributing
|
|
209
|
+
|
|
210
|
+
[](https://github.com/devfolioco/react-otp-input/issues) [](https://github.com/devfolioco/react-otp-input/pulls)
|
|
211
|
+
|
|
212
|
+
Feel free to open [issues](https://github.com/devfolioco/react-otp-input/issues/new/choose) and [pull requests](https://github.com/devfolioco/react-otp-input/pulls)!
|
|
213
|
+
|
|
214
|
+
## License
|
|
215
|
+
|
|
216
|
+
[](https://github.com/devfolioco/react-otp-input/blob/master/LICENSE)
|
|
217
|
+
|
|
218
|
+
## Contributors ✨
|
|
219
|
+
|
|
220
|
+
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
|
|
221
|
+
|
|
222
|
+
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
|
|
223
|
+
<!-- prettier-ignore-start -->
|
|
224
|
+
<!-- markdownlint-disable -->
|
|
225
|
+
<table>
|
|
226
|
+
<tbody>
|
|
227
|
+
<tr>
|
|
228
|
+
<td align="center" valign="top" width="14.28%"><a href="https://github.com/apollonian"><img src="https://avatars2.githubusercontent.com/u/2150306?v=4?s=100" width="100px;" alt="Abhishek Warokar"/><br /><sub><b>Abhishek Warokar</b></sub></a><br /><a href="https://github.com/devfolioco/react-otp-input/commits?author=apollonian" title="Code">💻</a> <a href="#design-apollonian" title="Design">🎨</a> <a href="#maintenance-apollonian" title="Maintenance">🚧</a> <a href="#ideas-apollonian" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/devfolioco/react-otp-input/pulls?q=is%3Apr+reviewed-by%3Aapollonian" title="Reviewed Pull Requests">👀</a></td>
|
|
229
|
+
<td align="center" valign="top" width="14.28%"><a href="https://ajayns.me"><img src="https://avatars0.githubusercontent.com/u/20743219?v=4?s=100" width="100px;" alt="Aj"/><br /><sub><b>Aj</b></sub></a><br /><a href="https://github.com/devfolioco/react-otp-input/commits?author=ajayns" title="Code">💻</a> <a href="#design-ajayns" title="Design">🎨</a> <a href="#ideas-ajayns" title="Ideas, Planning, & Feedback">🤔</a></td>
|
|
230
|
+
<td align="center" valign="top" width="14.28%"><a href="http://aromalanil.me"><img src="https://avatars1.githubusercontent.com/u/49222186?v=4?s=100" width="100px;" alt="Aromal Anil"/><br /><sub><b>Aromal Anil</b></sub></a><br /><a href="https://github.com/devfolioco/react-otp-input/commits?author=aromalanil" title="Code">💻</a> <a href="#tool-aromalanil" title="Tools">🔧</a></td>
|
|
231
|
+
<td align="center" valign="top" width="14.28%"><a href="https://borntofrappe.github.io"><img src="https://avatars0.githubusercontent.com/u/33316703?v=4?s=100" width="100px;" alt="Gabriele Corti"/><br /><sub><b>Gabriele Corti</b></sub></a><br /><a href="https://github.com/devfolioco/react-otp-input/commits?author=borntofrappe" title="Code">💻</a> <a href="#a11y-borntofrappe" title="Accessibility">️️️️♿️</a></td>
|
|
232
|
+
<td align="center" valign="top" width="14.28%"><a href="https://www.anoopms.me"><img src="https://avatars1.githubusercontent.com/u/46913894?v=4?s=100" width="100px;" alt="Anoop"/><br /><sub><b>Anoop</b></sub></a><br /><a href="https://github.com/devfolioco/react-otp-input/commits?author=anoopmsivadas" title="Code">💻</a></td>
|
|
233
|
+
<td align="center" valign="top" width="14.28%"><a href="http://dewanshrawat.xyz"><img src="https://avatars0.githubusercontent.com/u/17003127?v=4?s=100" width="100px;" alt="Dewansh Rawat"/><br /><sub><b>Dewansh Rawat</b></sub></a><br /><a href="https://github.com/devfolioco/react-otp-input/issues?q=author%3Adewanshrawat15" title="Bug reports">🐛</a></td>
|
|
234
|
+
<td align="center" valign="top" width="14.28%"><a href="http://ishanchhabra.com"><img src="https://avatars3.githubusercontent.com/u/32290367?v=4?s=100" width="100px;" alt="Ishan Chhabra"/><br /><sub><b>Ishan Chhabra</b></sub></a><br /><a href="https://github.com/devfolioco/react-otp-input/commits?author=ishan-chhabra" title="Code">💻</a></td>
|
|
235
|
+
</tr>
|
|
236
|
+
<tr>
|
|
237
|
+
<td align="center" valign="top" width="14.28%"><a href="http://www.causztic.com"><img src="https://avatars.githubusercontent.com/u/2081441?v=4?s=100" width="100px;" alt="yaojie"/><br /><sub><b>yaojie</b></sub></a><br /><a href="https://github.com/devfolioco/react-otp-input/commits?author=causztic" title="Code">💻</a></td>
|
|
238
|
+
<td align="center" valign="top" width="14.28%"><a href="http://prateeksurana.me"><img src="https://avatars.githubusercontent.com/u/21277179?v=4?s=100" width="100px;" alt="Prateek Surana"/><br /><sub><b>Prateek Surana</b></sub></a><br /><a href="https://github.com/devfolioco/react-otp-input/commits?author=prateek3255" title="Code">💻</a> <a href="#maintenance-prateek3255" title="Maintenance">🚧</a> <a href="#ideas-prateek3255" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/devfolioco/react-otp-input/commits?author=prateek3255" title="Documentation">📖</a> <a href="#design-prateek3255" title="Design">🎨</a></td>
|
|
239
|
+
<td align="center" valign="top" width="14.28%"><a href="https://github.com/suleymanbariseser"><img src="https://avatars.githubusercontent.com/u/50797736?v=4?s=100" width="100px;" alt="Süleyman Barış Eser"/><br /><sub><b>Süleyman Barış Eser</b></sub></a><br /><a href="https://github.com/devfolioco/react-otp-input/issues?q=author%3Asuleymanbariseser" title="Bug reports">🐛</a></td>
|
|
240
|
+
<td align="center" valign="top" width="14.28%"><a href="https://medium.com/@skdomino"><img src="https://avatars.githubusercontent.com/u/28181?v=4?s=100" width="100px;" alt="Steve Domino"/><br /><sub><b>Steve Domino</b></sub></a><br /><a href="https://github.com/devfolioco/react-otp-input/commits?author=sdomino" title="Code">💻</a></td>
|
|
241
|
+
<td align="center" valign="top" width="14.28%"><a href="https://github.com/hogiyogi597"><img src="https://avatars.githubusercontent.com/u/25204032?v=4?s=100" width="100px;" alt="Stephen Hogan"/><br /><sub><b>Stephen Hogan</b></sub></a><br /><a href="https://github.com/devfolioco/react-otp-input/commits?author=hogiyogi597" title="Code">💻</a></td>
|
|
242
|
+
</tr>
|
|
243
|
+
</tbody>
|
|
244
|
+
</table>
|
|
245
|
+
|
|
246
|
+
<!-- markdownlint-restore -->
|
|
247
|
+
<!-- prettier-ignore-end -->
|
|
248
|
+
|
|
249
|
+
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
|
250
|
+
|
|
251
|
+
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>react-otp-input demo</title>
|
|
7
|
+
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
|
|
8
|
+
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet" />
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="root"></div>
|
|
12
|
+
<script type="module" src="/src/main.tsx"></script>
|
|
13
|
+
</body>
|
|
14
|
+
</html>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "example",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.0.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "tsc && vite build",
|
|
9
|
+
"preview": "vite preview"
|
|
10
|
+
},
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"react": "^18.2.0",
|
|
13
|
+
"react-dom": "^18.2.0"
|
|
14
|
+
},
|
|
15
|
+
"devDependencies": {
|
|
16
|
+
"@types/node": "^18.16.0",
|
|
17
|
+
"@types/react": "^18.0.28",
|
|
18
|
+
"@types/react-dom": "^18.0.11",
|
|
19
|
+
"@vitejs/plugin-react": "^3.1.0",
|
|
20
|
+
"typescript": "^4.9.3",
|
|
21
|
+
"vite": "^4.2.3"
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import OTPInput from '../../src';
|
|
3
|
+
|
|
4
|
+
function App() {
|
|
5
|
+
const [{ otp, numInputs, separator, minLength, maxLength, placeholder, inputType }, setConfig] = React.useState({
|
|
6
|
+
otp: '',
|
|
7
|
+
numInputs: 4,
|
|
8
|
+
separator: '-',
|
|
9
|
+
minLength: 0,
|
|
10
|
+
maxLength: 40,
|
|
11
|
+
placeholder: '',
|
|
12
|
+
inputType: 'text' as const,
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
const handleOTPChange = (otp: string) => {
|
|
16
|
+
setConfig((prevConfig) => ({ ...prevConfig, otp }));
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
const handleChange = (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLSelectElement>) => {
|
|
20
|
+
const { name, value } = event.target;
|
|
21
|
+
setConfig((prevConfig) => ({ ...prevConfig, [name]: value }));
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
const handleNumInputsChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
25
|
+
let numInputs = event.target.valueAsNumber;
|
|
26
|
+
|
|
27
|
+
if (numInputs < minLength || numInputs > maxLength) {
|
|
28
|
+
numInputs = 4;
|
|
29
|
+
|
|
30
|
+
console.error(`Please enter a value between ${minLength} and ${maxLength}`);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
setConfig((prevConfig) => ({ ...prevConfig, numInputs }));
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
const clearOtp = () => {
|
|
37
|
+
setConfig((prevConfig) => ({ ...prevConfig, otp: '' }));
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
|
41
|
+
event.preventDefault();
|
|
42
|
+
alert(otp);
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
return (
|
|
46
|
+
<div className="container">
|
|
47
|
+
<div className="side-bar">
|
|
48
|
+
<a href="https://github.com/devfolioco/react-otp-input" target="_blank" rel="noreferrer">
|
|
49
|
+
<div className="side-bar__segment side-bar__segment--header">
|
|
50
|
+
<h2>react-otp-input</h2>
|
|
51
|
+
</div>
|
|
52
|
+
</a>
|
|
53
|
+
<div className="side-bar__segment">
|
|
54
|
+
<label htmlFor="num-inputs">
|
|
55
|
+
numInputs
|
|
56
|
+
<input
|
|
57
|
+
id="num-inputs"
|
|
58
|
+
name="numInputs"
|
|
59
|
+
type="number"
|
|
60
|
+
value={numInputs}
|
|
61
|
+
onChange={handleNumInputsChange}
|
|
62
|
+
min={minLength}
|
|
63
|
+
max={maxLength}
|
|
64
|
+
/>
|
|
65
|
+
</label>
|
|
66
|
+
</div>
|
|
67
|
+
<div className="side-bar__segment">
|
|
68
|
+
<label htmlFor="separator">
|
|
69
|
+
separator
|
|
70
|
+
<input
|
|
71
|
+
id="separator"
|
|
72
|
+
maxLength={1}
|
|
73
|
+
name="separator"
|
|
74
|
+
type="text"
|
|
75
|
+
value={separator}
|
|
76
|
+
onChange={handleChange}
|
|
77
|
+
/>
|
|
78
|
+
</label>
|
|
79
|
+
</div>
|
|
80
|
+
<div className="side-bar__segment">
|
|
81
|
+
<label htmlFor="value">
|
|
82
|
+
value
|
|
83
|
+
<input id="value" maxLength={numInputs} name="otp" type="text" value={otp} onChange={handleChange} />
|
|
84
|
+
</label>
|
|
85
|
+
</div>
|
|
86
|
+
<div className="side-bar__segment">
|
|
87
|
+
<label htmlFor="placeholder">
|
|
88
|
+
placeholder
|
|
89
|
+
<input id="placeholder" name="placeholder" type="text" value={placeholder} onChange={handleChange} />
|
|
90
|
+
</label>
|
|
91
|
+
</div>
|
|
92
|
+
<div className="side-bar__segment">
|
|
93
|
+
<label htmlFor="inputType">inputType</label>
|
|
94
|
+
<select id="inputType" name="inputType" value={inputType} onChange={handleChange}>
|
|
95
|
+
<option value="text">text</option>
|
|
96
|
+
<option value="number">number</option>
|
|
97
|
+
<option value="password">password</option>
|
|
98
|
+
<option value="tel">tel</option>
|
|
99
|
+
</select>
|
|
100
|
+
</div>
|
|
101
|
+
<div className="side-bar__segment side-bar__segment--bottom">
|
|
102
|
+
<a href="https://github.com/devfolioco/react-otp-input">Documentation and Source</a>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
<div className="view">
|
|
106
|
+
<div className="card">
|
|
107
|
+
<form onSubmit={handleSubmit}>
|
|
108
|
+
<p>Enter verification code</p>
|
|
109
|
+
<div className="margin-top--small">
|
|
110
|
+
<OTPInput
|
|
111
|
+
inputStyle="inputStyle"
|
|
112
|
+
numInputs={numInputs}
|
|
113
|
+
onChange={handleOTPChange}
|
|
114
|
+
renderSeparator={<span>{separator}</span>}
|
|
115
|
+
value={otp}
|
|
116
|
+
placeholder={placeholder}
|
|
117
|
+
inputType={inputType}
|
|
118
|
+
renderInput={(props) => <input {...props} />}
|
|
119
|
+
shouldAutoFocus
|
|
120
|
+
/>
|
|
121
|
+
</div>
|
|
122
|
+
<div className="btn-row">
|
|
123
|
+
<button className="btn margin-top--large" type="button" disabled={otp.trim() === ''} onClick={clearOtp}>
|
|
124
|
+
Clear
|
|
125
|
+
</button>
|
|
126
|
+
<button className="btn margin-top--large" disabled={otp.length < numInputs}>
|
|
127
|
+
Get OTP
|
|
128
|
+
</button>
|
|
129
|
+
</div>
|
|
130
|
+
</form>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
export default App;
|
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
body {
|
|
2
|
+
font-family: 'Lato', sans-serif;
|
|
3
|
+
font-size: 16px;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
a {
|
|
7
|
+
text-decoration: none;
|
|
8
|
+
color: inherit;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.container {
|
|
12
|
+
display: flex;
|
|
13
|
+
width: 100%;
|
|
14
|
+
min-height: 100vh;
|
|
15
|
+
height: 100%;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.side-bar {
|
|
19
|
+
width: 250px;
|
|
20
|
+
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
|
|
21
|
+
z-index: 1;
|
|
22
|
+
position: relative;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.inputStyle {
|
|
26
|
+
width: 3rem !important;
|
|
27
|
+
height: 3rem;
|
|
28
|
+
margin: 0 1rem;
|
|
29
|
+
font-size: 2rem;
|
|
30
|
+
border-radius: 4px;
|
|
31
|
+
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@media only screen and (max-width: 678px) {
|
|
35
|
+
.container {
|
|
36
|
+
flex-wrap: wrap;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.side-bar {
|
|
41
|
+
width: 100%;
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: column;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.side-bar__segment--header {
|
|
47
|
+
text-align: center;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.side-bar__segment--bottom {
|
|
51
|
+
position: static !important;
|
|
52
|
+
margin: 10px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
label {
|
|
56
|
+
display: block;
|
|
57
|
+
float: left;
|
|
58
|
+
width: 120px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.card {
|
|
62
|
+
width: 100%;
|
|
63
|
+
min-width: 120px !important;
|
|
64
|
+
margin: 20px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.side-bar__segment > label > input[type='number'],
|
|
68
|
+
.side-bar__segment > label > input[type='text'] {
|
|
69
|
+
width: 180px !important;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@media only screen and (max-width: 470px) {
|
|
74
|
+
.margin-top--small .inputStyle {
|
|
75
|
+
width: 2rem !important;
|
|
76
|
+
height: 2rem;
|
|
77
|
+
margin: 0 5px;
|
|
78
|
+
font-size: 1rem;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.card > form > p {
|
|
82
|
+
font-size: 1.2em !important;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.side-bar__segment {
|
|
87
|
+
padding: 0.5rem 1rem;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.side-bar__segment--header {
|
|
91
|
+
margin: 1rem 0;
|
|
92
|
+
border-bottom: 1px solid lightgray;
|
|
93
|
+
border-top: 1px solid lightgray;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.side-bar__segment--header:hover {
|
|
97
|
+
background-color: rgba(0, 0, 0, 0.1);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.side-bar__segment--bottom {
|
|
101
|
+
font-weight: bold;
|
|
102
|
+
position: absolute;
|
|
103
|
+
bottom: 2rem;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.view {
|
|
107
|
+
display: flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
justify-content: center;
|
|
110
|
+
width: 100%;
|
|
111
|
+
background-color: #f2f2f3;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.side-bar__segment > label > input[type='number'],
|
|
115
|
+
.side-bar__segment > label > input[type='text'] {
|
|
116
|
+
width: 150px;
|
|
117
|
+
border-radius: 4px;
|
|
118
|
+
border: 1px solid lightgrey;
|
|
119
|
+
margin: 0.5rem 0;
|
|
120
|
+
height: 1.5rem;
|
|
121
|
+
padding: 0 0.5rem;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.side-bar__segment > label > input[type='checkbox'] {
|
|
125
|
+
border-radius: 4px;
|
|
126
|
+
border: 1px solid lightgrey;
|
|
127
|
+
margin: 0.5rem;
|
|
128
|
+
width: 1rem;
|
|
129
|
+
height: 1rem;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.card {
|
|
133
|
+
min-width: 360px;
|
|
134
|
+
padding: 2rem;
|
|
135
|
+
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
|
|
136
|
+
border-radius: 4px;
|
|
137
|
+
background: white;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.card > form {
|
|
141
|
+
display: flex;
|
|
142
|
+
flex-direction: column;
|
|
143
|
+
align-items: center;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.card > form > p {
|
|
147
|
+
font-size: 1.5em;
|
|
148
|
+
font-weight: bold;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
input[type='number']::-webkit-inner-spin-button,
|
|
152
|
+
input[type='number']::-webkit-outer-spin-button {
|
|
153
|
+
-webkit-appearance: none;
|
|
154
|
+
-moz-appearance: none;
|
|
155
|
+
appearance: none;
|
|
156
|
+
margin: 0;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
input[type='number'] {
|
|
160
|
+
-webkit-appearance: textfield;
|
|
161
|
+
-moz-appearance: textfield;
|
|
162
|
+
appearance: textfield;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
select {
|
|
166
|
+
border-radius: 4px;
|
|
167
|
+
display: block;
|
|
168
|
+
border: 1px solid lightgrey;
|
|
169
|
+
margin-top: 0.5rem;
|
|
170
|
+
height: 1.5rem;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.btn-row {
|
|
174
|
+
display: flex;
|
|
175
|
+
flex-direction: row;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.btn {
|
|
179
|
+
background-color: #3273dc;
|
|
180
|
+
border: none;
|
|
181
|
+
padding: 0.5rem 1rem;
|
|
182
|
+
color: white;
|
|
183
|
+
border-radius: 4px;
|
|
184
|
+
cursor: pointer;
|
|
185
|
+
margin: 1rem;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.btn:disabled {
|
|
189
|
+
background-color: rgba(0, 0, 0, 0.4);
|
|
190
|
+
cursor: not-allowed;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.margin-top--small {
|
|
194
|
+
margin-top: 1rem;
|
|
195
|
+
margin-bottom: -1rem;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.margin-top--small > div {
|
|
199
|
+
flex-wrap: wrap;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.margin-top--small > div > div {
|
|
203
|
+
margin-bottom: 1rem;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.margin-top--medium {
|
|
207
|
+
margin-top: 1.5rem;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.margin-top--large {
|
|
211
|
+
margin-top: 4rem;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.error {
|
|
215
|
+
border: 1px solid red !important;
|
|
216
|
+
}
|