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

Commit b11a986

Browse files
drac94drac94
authored
Merge pull request #40 from drac94/v3.1.0
V3.1.0
2 parents a951d60 + 9209351 commit b11a986

12 files changed

Lines changed: 479 additions & 327 deletions

File tree

‎README.md‎

Lines changed: 97 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
![image](https://user-images.githubusercontent.com/1719915/82956329-2f7e8700-9f76-11ea-978f-ec7135c79311.png)
1+
![image](https://user-images.githubusercontent.com/1719915/159336862-113dfbdd-e415-4237-afdb-f9df6628aaf7.png)
22

33
# React Auth Code Input
44

5-
> One-time password (OTP) React input component, uncontrolled, zero dependencies, fully tested.
5+
> One-time password (OTP) React component, 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)
@@ -26,43 +26,119 @@ or
2626
yarn add react-auth-code-input
2727
```
2828

29-
## Usage
29+
## Basic Usage
3030

31-
```jsx
31+
```tsx
3232
import React, { useState } from 'react';
3333
import AuthCode from 'react-auth-code-input';
3434

3535
const App = () => {
36-
const [result, setResult] = useState('');
36+
const [result, setResult] = useState();
37+
const handleOnChange = (res: string) => {
38+
setResult(res);
39+
};
40+
41+
return <AuthCode onChange={handleOnChange} />;
42+
};
43+
```
44+
45+
## Mode
46+
47+
By default you can type anything in the inputs as the `allowedCharacters` prop is defaulted to `alphanumeric` but you can also choose between allowing only letters or only numbers by setting the prop to `alpha` or `numeric` respectively.
48+
49+
```tsx
50+
import React, { useState } from 'react';
51+
import AuthCode from 'react-auth-code-input';
52+
53+
const App = () => {
54+
const [result, setResult] = useState();
55+
const handleOnChange = (res: string) => {
56+
setResult(res);
57+
};
58+
59+
return <AuthCode allowedCharacters='numeric' onChange={handleOnChange} />;
60+
};
61+
```
62+
63+
## Focus
64+
65+
By default the first input is focused when the component is mounted, you can opt-out from this by setting the `autoFocus` prop to `false`, and then you can handle the focus manually by passing a reference.
66+
67+
```tsx
68+
import React, { useRef, useState } from 'react';
69+
import AuthCode, { AuthCodeRef } from 'react-auth-code-input';
70+
71+
const App = () => {
72+
const AuthInputRef = useRef<AuthCodeRef>(null);
73+
const [result, setResult] = useState();
74+
const handleOnChange = (res: string) => {
75+
setResult(res);
76+
};
77+
78+
return (
79+
<>
80+
<AuthCode
81+
autoFocus={false}
82+
onChange={handleOnChange}
83+
ref={AuthInputRef}
84+
/>
85+
<button onClick={() => AuthInputRef.current?.focus()}>Focus</button>
86+
</>
87+
);
88+
};
89+
```
90+
91+
## Clear
92+
93+
You can clear all the inputs by passing a reference and then calling the `clear` method.
94+
95+
```tsx
96+
import React, { useRef, useState } from 'react';
97+
import AuthCode, { AuthCodeRef } from 'react-auth-code-input';
98+
99+
const App = () => {
100+
const AuthInputRef = useRef<AuthCodeRef>(null);
101+
const [result, setResult] = useState();
37102
const handleOnChange = (res: string) => {
38103
setResult(res);
39104
};
40105

41106
return (
42-
<AuthCode
43-
length={5}
44-
onChange={handleOnChange}
45-
containerClassName='container'
46-
inputClassName='input'
47-
/>
107+
<>
108+
<AuthCode onChange={handleOnChange} ref={AuthInputRef} />
109+
<button onClick={() => AuthInputRef.current?.clear()}>Clear</button>
110+
</>
48111
);
49112
};
50113
```
51114

115+
## SMS Autofill
116+
117+
This component supports autofill from SMS's received, tested on Safari and Chrome in iOS.
118+
52119
## Props
53120

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 | |
121+
| Prop | Type | Description | Default Value | Observations |
122+
| :------------------- | :---------------------- | :---------------------------------------------------------- | :------------- | :----------------------------------------------- |
123+
| `allowedCharacters` | String | Type of allowed characters for your code. | `alphanumeric` | Valid values: `alpha`, `alphanumeric`, `numeric` |
124+
| `ariaLabel` | String | Accessibility. | | |
125+
| `autoFocus` | Boolean | Wether the first input is focused on mount or not.. | true | |
126+
| `length` | Number | The number of inputs to display. | 6 | |
127+
| `containerClassName` | String | The styles to be applied to the container. | | |
128+
| `inputClassName` | String | The styles to be applied to each input. | | |
129+
| `onChange` | Function(value: String) | Callback function called every time an input value changes. | | Required |
130+
| `isPassword` | Boolean | Whether to display the inputs as passwords or not. | false | |
63131

64132
## Changelog
65133

134+
### 3.1.0
135+
136+
- Add `autoFocus` prop set to true by default to not break current usages.
137+
- Expose a `focus` method to handle the focus of the first input manually.
138+
- Expose a `clear` method to clear the input programmatically.
139+
- Add validations for when not using typescript.
140+
- Update React peerDependency to use any version 16+.
141+
66142
### 3.0.0
67143

68144
- 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.
@@ -98,22 +174,7 @@ const App = () => {
98174

99175
### 1.0.0
100176

101-
- Initial Version.
102-
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 |
177+
- Initial Version. | | deprecated since version 1.2.0 |
117178

118179
## License
119180

‎dist/index.js‎

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

0 commit comments

Comments
 (0)