A fully customizable, one-time password (OTP) and phone number with separator input component for the web built with React.
npm install react18-input-otp  
A fully customizable, one-time password (OTP) and phone number with separator input component for the web built with React. Tested on Web, Android, and iOS. This package supports all react versions.
- A fully customisable OTP input package with support of React 18 and Typescript.
- It works great on both react and ionic app. Works like a charm on mobile too.
- You can specify only numeric inputs with inputNum prop.
- Works perfectly with clipboard paste feature on web and mobile.
- The only OTP input package on npm that supports 'enter' key to submit.
- Zero OTP paste issues on Android.
- Easy paste on iOS chrome, read from SMS feature.
- Supports onSubmit optional prop. You do not even need a button to submit.
- You can use this package for phone number inputs too.
- You can use this package for passcode fields too with inputSecure prop.
- You can provide custom css as well as input props to the React18-input-otp.
- 0 dependencies.
- Minzipped size only 3.6 kb.
- No open issues.
- No security bugs.
#### To install the latest stable version:
``
npm install --save react18-input-otp
#### Basic usage:
##### As class component
`jsx
import React, { Component } from 'react';
import OtpInput from 'react18-input-otp';
export default class App extends Component {
state = { otp: '' };
handleChange = (otp) => this.setState({ otp });
render() {
return
}
}
`
##### As functional component with hooks
`jsx`
import React, { useState } from 'react';
import OtpInput from 'react18-input-otp';
export default function ReactOtpInput() {
const [otp, setOtp] = useState('');
const handleChange = (enteredOtp) => {
setOtp(enteredOtp);
};
return
}
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | false | none | Provide unique id for your OTP input. |
| numInputs | number | true | 4 | Number of OTP inputs to be rendered. |
| onChange | function | true | console.log | Returns OTP code typed in inputs. |
| onSubmit | function | false | console.log | Returns OTP code on submit. This allows to submit the OTP on enter key too. |
| value | string / number | true | '' | The value of the OTP passed into the component. |
| placeholder | string | false | none | Specify an expected value of each input. The length of this string should be equal to numInputs. |
| separator | component | false | none | Provide a custom separator between inputs by passing a component. For instance, <span>-</span> would add - between each input. |
| separateAfter | number | false | 1 | Provide the count to set the separater after every input. For instance, 3 would add - after every third input. |
| autoComplete | string | false | off | Provide the autocomplete feature for the input. Now, supports one-time-code as autoComplete. |
| ariaLabelOverride | string | false | none | Provide the custom arialabel for the input. |
| containerStyle | style (object) / className (string) | false | none | Style applied or class passed to container of inputs. |
| inputStyle | style (object) / className (string) | false | none | Style applied or class passed to each input. |
| focusStyle | style (object) / className (string) | false | none | Style applied or class passed to inputs on focus. |
| isDisabled | boolean | false | false | Disables all the inputs. |
| disabledStyle | style (object) / className (string) | false | none | Style applied or class passed to each input when disabled. |
| hasErrored | boolean | false | false | Indicates there is an error in the inputs. |
| errorStyle | style (object) / className (string) | false | none | Style applied or class passed to each input when errored. |
| isSuccessed | boolean | false | false | Indicates there is success with the inputs.. |
| successStyle | style (object) / className (string) | false | none | Style applied or class passed to each input when success. |
| shouldAutoFocus | boolean | false | false | Auto focuses input on initial page load. |
| isInputNum | boolean | false | false | Restrict input to only numbers. |
| isInputSecure | boolean | false | false | Masks input characters. |
| data-cy | string | false | - | Test attribute passed to the inputs. |
| data-testid | string | false | - | Test attribute passed to the inputs. |
| custom-test-id | string | false | - | Custom test attribute passed to the inputs. |
| custom-test-attr | string | false | - | Custom test attribute passed to the inputs. |
| inputProps | InputHTMLAttributes | InputHTMLAttributes[] | false | - | Custom input props. |
#### To run the development server:
`
npm run dev
 
- [x] Add flowtypes
- [x] Add ESLint, Prettier for code quality
- [x] Add styling support for states including focus/disabled
- [ ] Write tests
 
Feel free to open issues and pull requests!
Special Thanks to devfolioco. This project is build on top of react-otp-input.
This project follows the all-contributors specification. Contributions of any kind welcome!