@mvp-rockets/react-otp-input
A fully customizable, one-time password input component for the web built with React. This package is based on great work of contributers of react-otp-input. But i needed this package and for unknown reasons the contributers of the original package does not accept the open PRs that solve the REACT 18 dependency problem. So based on The PR here i created this package for the others who need this.
To see the original package Click
Installation
To install the latest stable version:
npm install --save @mvp-rockets/react-otp-input
Basic usage:
import React, { useState } from 'react';
import OtpInput from '@mvp-rockets/react-otp-input';
function App() {
const [otp, setOtp] = useState('');
return (
<OtpInput
inputStyle="inputStyle"
numInputs={4}
onChange={(value) => setOtp(value)}
separator={<span>-</span>}
isInputNum={true}
shouldAutoFocus
value={otp}
/>
);
}
export default App;API
| Name |
Type | Required | Default | Description |
|---|---|---|---|---|
| numInputs | number | true | 4 | Number of OTP inputs to be rendered. |
| onChange | function | true | console.log | Returns OTP code typed in inputs. |
| 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. |
| 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. |
| 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. |
Development
To run the development server:
npm run dev
License
Contributors ✨
Thanks goes to these wonderful people (emoji key):
 Mahdi Mohaqeq |
This project follows the all-contributors specification. Contributions of any kind welcome!