A fully customizable, one-time password input component for the web built with React.
npm install --save react-otp-module
import React, { useState } from 'react'
import OtpInput from 'react-otp-module'
const App = () => {
const [otp, setOtp] = useState()
return (
<form>
<label htmlFor='otp'>Enter your OTP here</label>
<OtpInput
id="otp"
value={otp}
onChange={setOtp}
numInputs={6}
separator={<span className='px-2'></span>}
inputStyle='otp__input'
placeholder='------'
isInputNum={true}
/>
</form>
)
}
export default App
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. |
Jagannath Swarnkar 💻 🎨 🚧 🤔 👀 |
Paritosh Maurya 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT © jagannath-swarnkar