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

Update version and readme #26

Merged
merged 2 commits into from
Jan 4, 2022
Merged

Update version and readme #26

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1f50aec
update version and readme
Jan 4, 2022
bd5ea0e
revert package bump
Jan 4, 2022
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
30 changes: 21 additions & 9 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. It allows deleting using the backspace and pasting as well.
> A React Component for inputting Auth Codes inspired in Apple Two-Factor Authentication UI. You can type, paste and move backwards using the backspace.

[![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 All @@ -29,14 +29,19 @@ yarn add react-auth-code-input
## Usage

```jsx
import React from 'react';
import React, { useState } from 'react';
import AuthCode from 'react-auth-code-input';

const App = () => {
const [result, setResult] = useState('');
const handleOnChange = (res: string) => {
setResult(res);
};

return (
<AuthCode
characters={5}
onChange={() => null}
onChange={handleOnChange}
containerClassName='container'
inputClassName='input'
/>
Expand All @@ -48,20 +53,27 @@ const App = () => {

| Prop | Type | Description | Default Value | Observations |
| :------------------- | :---------------------- | :------------------------------------------------------------------------------ | :------------- | :----------------------------- |
| `characters` | Number | The number of inputs to display | 6 | |
| `allowedCharacters` | String | Regex for allowed characters | `^[A-Za-z0-9]` | |
| `password` | Boolean | If present changes the type of the input to password, by default is set to text | False | |
| `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 |
| `inputClassName` | String | The styles to be applied to each input | | |
| `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 |

## Changelog

### 2.0.0

- Remove `inputStyle` prop in favor of `inputClassName`.
- Remove `containerStyle` prop in favor of `containerClassName`.
- Remove `password` prop in favor of `inputType` which accepts _text_, _password_ or _number_ value.

### 1.2.1

- Add missing dist files
- Add missing dist files.

### 1.2.0

Expand Down