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

Version 3 #34

Merged
drac94 merged 1 commit into from
Feb 14, 2022
Merged

Version 3 #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 34 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

# React Auth Code Input

> A React Component for inputting Auth Codes inspired in Apple Two-Factor Authentication UI. You can type, paste and move backwards using the backspace.
> One-time password (OTP) React input component, uncontrolled, zero dependencies, fully tested.

[![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)
[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE.md)
Expand Down Expand Up @@ -40,7 +40,7 @@ const App = () => {

return (
<AuthCode
characters={5}
length={5}
onChange={handleOnChange}
containerClassName='container'
inputClassName='input'
Expand All @@ -49,23 +49,27 @@ const App = () => {
};
```

### Props
## Props

| Prop | Type | Description | Default Value | Observations |
| :------------------- | :---------------------- | :------------------------------------------------------------------------------ | :------------- | :----------------------------- |
| `allowedCharacters` | String | Regex for allowed characters | `[A-Za-z0-9]+` | |
| `ariaLabel` | String | Accessibility | | |
| `characters` | Number | The number of inputs to display | 6 | |
| `containerClassName` | String | The styles to be applied to the container | | |
| `inputClassName` | String | The styles to be applied to each input | | |
| `inputType` | String | The type of the inputs | text | text, number or password |
| `onChange` | Function(value: String) | Callback function called every time an input value changes | | |
| ~~`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 |
| ~~`inputStyle`~~ | Object | The styles to be applied to each input | | deprecated since version 1.2.0 |
| ~~`containerStyle`~~ | Object | The styles to be applied to the container | | deprecated since version 1.2.0 |
| Prop | Type | Description | Default Value | Observations |
| :------------------- | :---------------------- | :---------------------------------------------------------- | :------------- | :--------------------------------- |
| `allowedCharacters` | String | Type of allowed characters for your code. | `alphanumeric` | `alpha`, `alphanumeric`, `numeric` |
| `ariaLabel` | String | Accessibility. | | |
| `length` | Number | The number of inputs to display. | 6 | |
| `containerClassName` | String | The styles to be applied to the container. | | |
| `inputClassName` | String | The styles to be applied to each input. | | |
| `onChange` | Function(value: String) | Callback function called every time an input value changes. | | |
| `isPassword` | Boolean | Whether to display the inputs as passwords or not. | false | |

## Changelog

### 3.0.0

- 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.
- Improved logic.
- Improved tests.
- Improved types.

### 2.1.0

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

- Initial Version.

## Props versions 1 and 2

| Prop | Type | Description | Default Value | Observations |
| :------------------- | :---------------------- | :------------------------------------------------------------------------------ | :------------- | :----------------------------- |
| `allowedCharacters` | String | Regex for allowed characters | `[A-Za-z0-9]+` | |
| `ariaLabel` | String | Accessibility | | |
| `characters` | Number | The number of inputs to display | 6 | |
| `containerClassName` | String | The styles to be applied to the container | | |
| `inputClassName` | String | The styles to be applied to each input | | |
| `inputType` | String | The type of the inputs | text | text, number or password |
| `onChange` | Function(value: String) | Callback function called every time an input value changes | | |
| ~~`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 |
| ~~`inputStyle`~~ | Object | The styles to be applied to each input | | deprecated since version 1.2.0 |
| ~~`containerStyle`~~ | Object | The styles to be applied to the container | | deprecated since version 1.2.0 |

## License

Licensed under the MIT License, Copyright © 2020-present Luis Guerrero [drac94](https://github.com/drac94).
Expand Down
81 changes: 57 additions & 24 deletions dist/index.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading