react-auth-code-input
Version:
One-time password (OTP) React input component, uncontrolled, zero dependencies, fully tested.
172 lines (124 loc) • 6.78 kB
Markdown
# React Auth Code Input
> One-time password (OTP) React component, zero dependencies, fully tested.
[](https://www.npmjs.com/package/react-auth-code-input) [](https://standardjs.com)
[](LICENSE.md)
[](https://www.npmjs.com/package/react-auth-code-input)
[](https://www.npmjs.com/package/react-auth-code-input)
## Demo
[Demo](https://www.luisguerrero.me/react-auth-code-input/)
## Install
```bash
npm install --save react-auth-code-input
```
or
```bash
yarn add react-auth-code-input
```
# Version 3+
## Basic Usage
```tsx
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 onChange={handleOnChange} />;
};
```
## Mode
By default you can type numbers and letters 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.
```tsx
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 allowedCharacters='numeric' onChange={handleOnChange} />;
};
```
## Focus
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.
```tsx
import React, { useRef, useState } from 'react';
import AuthCode, { AuthCodeRef } from 'react-auth-code-input';
const App = () => {
const AuthInputRef = useRef<AuthCodeRef>(null);
const [result, setResult] = useState();
const handleOnChange = (res: string) => {
setResult(res);
};
return (
<>
<AuthCode
autoFocus={false}
onChange={handleOnChange}
ref={AuthInputRef}
/>
<button onClick={() => AuthInputRef.current?.focus()}>Focus</button>
</>
);
};
```
## Clear
You can clear all the inputs by passing a reference and then calling the `clear` method.
```tsx
import React, { useRef, useState } from 'react';
import AuthCode, { AuthCodeRef } from 'react-auth-code-input';
const App = () => {
const AuthInputRef = useRef<AuthCodeRef>(null);
const [result, setResult] = useState();
const handleOnChange = (res: string) => {
setResult(res);
};
return (
<>
<AuthCode onChange={handleOnChange} ref={AuthInputRef} />
<button onClick={() => AuthInputRef.current?.clear()}>Clear</button>
</>
);
};
```
## SMS Autofill
This component supports autofill from SMS's received, tested on Safari and Chrome in iOS.
## Props
| Prop | Type | Description | Default Value | Observations |
| :------------------- | :---------------------- | :---------------------------------------------------------- | :------------- | :----------------------------------------------- |
| `allowedCharacters` | String | Type of allowed characters for your code. | `alphanumeric` | Valid values: `alpha`, `alphanumeric`, `numeric` |
| `ariaLabel` | String | Accessibility. | | |
| `autoFocus` | Boolean | Wether the first input is focused on mount or not.. | true | Since version 3.1.0 |
| `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. | | Required |
| `isPassword` | Boolean | Whether to display the inputs as passwords or not. | false | |
| `disabled` | Boolean | Makes all the inputs disabled if true. | false | Since version 3.1.1 |
| `placeholder` | String | Displays a placeholder in all the inputs. | | Since version 3.2.0 |
## Changelog
### 3.2.1
- Fix allowing non-numeric characters being introduced in numeric mode on Safari and Firefox.
### 3.2.0
- Add `placeholder` prop.
- Export component props.
### 3.1.0
- Add `disabled` prop to disable all the inputs.
- Make the backspace delete the previous character if the current is empty. Previously it just moved the focus making the user hit twice the backspace to delete the value.
### 3.1.0
- Add `autoFocus` prop set to true by default to not break current usages.
- Expose a `focus` method using references to handle the focus of the first input manually.
- Expose a `clear` method using references to clear the input programmatically.
- Add validations for when not using typescript.
- Update React peerDependency to use any version 16+.
### 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.
## License
Licensed under the MIT License, Copyright © 2020-present Luis Guerrero [drac94](https://github.com/drac94).
See [LICENSE](./LICENSE) for more information.