react-otp-field
Version:
Customizable OTP Field component for the web built with React.js
146 lines (131 loc) • 3.73 kB
Markdown
# react-otp-field
[](https://www.npmjs.com/package/react-otp-field) [](https://github.com/coded-bear/react-otp-field/blob/main/LICENSE) [](https://www.npmjs.com/package/react-otp-field)
Customizable OTP Field component for the web built with React.js
[Live Demo](https://coded-bear.github.io/react-otp-field/)
## Installation
```
npm install --save react-otp-field
```
## Basic usage
```jsx
import React, { useState } from 'react';
import OtpField from 'react-otp-field';
const App = () => {
const [value, setValue] = useState('');
return (
<OtpField
value={value}
onChange={setValue}
numInputs={6}
onChangeRegex={/^([0-9]{0,})$/}
autoFocus
separator={<span>-</span>}
isTypeNumber
inputProps={{ className: 'otp-field__input', disabled: false }}
/>
);
};
```
## API
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Required</th>
<th>Default value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>String</td>
<td>true</td>
<td>''</td>
<td>The value of the OTP Field.</td>
</tr>
<tr>
<td>onChange</td>
<td>Function</td>
<td>true</td>
<td>console.log</td>
<td>Returns OTP values typed in inputs.</td>
</tr>
<tr>
<td>numInputs</td>
<td>Number</td>
<td>false</td>
<td>4</td>
<td>Number of inputs.</td>
</tr>
<tr>
<td>onChangeRegex</td>
<td>RegEx</td>
<td>false</td>
<td>none</td>
<td>RegEx for single onChange.</td>
</tr>
<tr>
<td>labelText</td>
<td>String</td>
<td>false</td>
<td>'Enter verification code'</td>
<td>Aria-label attribute for inputs.</td>
</tr>
<tr>
<td>classNames</td>
<td>String</td>
<td>false</td>
<td>'otp-field'</td>
<td>Class names for OTP Field component.</td>
</tr>
<tr>
<td>autoComplete</td>
<td>String</td>
<td>false</td>
<td>'off'</td>
<td>AutoComplete props for first input.</td>
</tr>
<tr>
<td>autoFocus</td>
<td>Boolean</td>
<td>false</td>
<td>false</td>
<td>AutoFocus on first input.</td>
</tr>
<tr>
<td>separator</td>
<td>Component</td>
<td>false</td>
<td>none</td>
<td>Separator between inputs.</td>
</tr>
<tr>
<td>isTypeNumber</td>
<td>Boolean</td>
<td>false</td>
<td>false</td>
<td>Type number for inputs.</td>
</tr>
<tr>
<td>hasError</td>
<td>Boolean</td>
<td>false</td>
<td>false</td>
<td>Error class 'otp-field--has-error' for otp-field component.</td>
</tr>
<tr>
<td>inputProps</td>
<td>Object</td>
<td>false</td>
<td>none</td>
<td>Props for inputs.</td>
</tr>
</tbody>
</table>
## Development
#### Run the development server:
```
npm run dev
```