Skip to content
This repository was archived by the owner on Nov 3, 2024. It is now read-only.

Commit a951d60

Browse files
drac94drac94
authored
Merge pull request #34 from drac94/feature/version-3
Version 3
2 parents 5ebdf88 + eefb038 commit a951d60

File tree

10 files changed

+568
-145
lines changed

10 files changed

+568
-145
lines changed

‎README.md‎

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
# React Auth Code Input
44

5-
> A React Component for inputting Auth Codes inspired in Apple Two-Factor Authentication UI. You can type, paste and move backwards using the backspace.
5+
> One-time password (OTP) React input component, uncontrolled, zero dependencies, fully tested.
66
77
[![NPM](https://img.shields.io/npm/v/react-auth-code-input.svg)](https://www.npmjs.com/package/react-auth-code-input) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
88
[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE.md)
@@ -40,7 +40,7 @@ const App = () => {
4040

4141
return (
4242
<AuthCode
43-
characters={5}
43+
length={5}
4444
onChange={handleOnChange}
4545
containerClassName='container'
4646
inputClassName='input'
@@ -49,23 +49,27 @@ const App = () => {
4949
};
5050
```
5151

52-
### Props
52+
## Props
5353

54-
| Prop | Type | Description | Default Value | Observations |
55-
| :------------------- | :---------------------- | :------------------------------------------------------------------------------ | :------------- | :----------------------------- |
56-
| `allowedCharacters` | String | Regex for allowed characters | `[A-Za-z0-9]+` | |
57-
| `ariaLabel` | String | Accessibility | | |
58-
| `characters` | Number | The number of inputs to display | 6 | |
59-
| `containerClassName` | String | The styles to be applied to the container | | |
60-
| `inputClassName` | String | The styles to be applied to each input | | |
61-
| `inputType` | String | The type of the inputs | text | text, number or password |
62-
| `onChange` | Function(value: String) | Callback function called every time an input value changes | | |
63-
| ~~`password`~~ | Boolean | If present changes the type of the input to password, by default is set to text | false | deprecated since version 2.0.0 |
64-
| ~~`inputStyle`~~ | Object | The styles to be applied to each input | | deprecated since version 1.2.0 |
65-
| ~~`containerStyle`~~ | Object | The styles to be applied to the container | | deprecated since version 1.2.0 |
54+
| Prop | Type | Description | Default Value | Observations |
55+
| :------------------- | :---------------------- | :---------------------------------------------------------- | :------------- | :--------------------------------- |
56+
| `allowedCharacters` | String | Type of allowed characters for your code. | `alphanumeric` | `alpha`, `alphanumeric`, `numeric` |
57+
| `ariaLabel` | String | Accessibility. | | |
58+
| `length` | Number | The number of inputs to display. | 6 | |
59+
| `containerClassName` | String | The styles to be applied to the container. | | |
60+
| `inputClassName` | String | The styles to be applied to each input. | | |
61+
| `onChange` | Function(value: String) | Callback function called every time an input value changes. | | |
62+
| `isPassword` | Boolean | Whether to display the inputs as passwords or not. | false | |
6663

6764
## Changelog
6865

66+
### 3.0.0
67+
68+
- Change the way the allowed characters are handled by using 3 predefined modes: alpha, alphanumeric, and numeric, allowing to have more control when validating the values introduced in the inputs.
69+
- Improved logic.
70+
- Improved tests.
71+
- Improved types.
72+
6973
### 2.1.0
7074

7175
- Support to fill one-time-codes directly from SMS's.
@@ -96,6 +100,21 @@ const App = () => {
96100

97101
- Initial Version.
98102

103+
## Props versions 1 and 2
104+
105+
| Prop | Type | Description | Default Value | Observations |
106+
| :------------------- | :---------------------- | :------------------------------------------------------------------------------ | :------------- | :----------------------------- |
107+
| `allowedCharacters` | String | Regex for allowed characters | `[A-Za-z0-9]+` | |
108+
| `ariaLabel` | String | Accessibility | | |
109+
| `characters` | Number | The number of inputs to display | 6 | |
110+
| `containerClassName` | String | The styles to be applied to the container | | |
111+
| `inputClassName` | String | The styles to be applied to each input | | |
112+
| `inputType` | String | The type of the inputs | text | text, number or password |
113+
| `onChange` | Function(value: String) | Callback function called every time an input value changes | | |
114+
| ~~`password`~~ | Boolean | If present changes the type of the input to password, by default is set to text | false | deprecated since version 2.0.0 |
115+
| ~~`inputStyle`~~ | Object | The styles to be applied to each input | | deprecated since version 1.2.0 |
116+
| ~~`containerStyle`~~ | Object | The styles to be applied to the container | | deprecated since version 1.2.0 |
117+
99118
## License
100119

101120
Licensed under the MIT License, Copyright © 2020-present Luis Guerrero [drac94](https://github.com/drac94).

‎dist/index.js‎

Lines changed: 57 additions & 24 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)