A fully customizable, one-time password input component for the web built with React.
npm install --save react-otp-input
No problem! You can find the documentation for v2 here
import React, { useState } from 'react';
import OtpInput from 'react-otp-input';
export default function App() {
const [otp, setOtp] = useState('');
return (
<OtpInput
value={otp}
onChange={setOtp}
numInputs={4}
renderSeparator={<span>-</span>}
renderInput={(props) => <input {...props} />}
/>
);
}
Name |
Type | Required | Default | Description |
---|---|---|---|---|
numInputs | number | true | 4 | Number of OTP inputs to be rendered. |
renderInput | function | true | none | A function that returns the input that is supposed to be rendered for each of the input fields.
The function will get two arguments: inputProps and index . inputProps is an object that contains all the props that should be passed to the input being rendered (Overriding these props is not recommended because it might lead to some unexpected behaviour). index is the index of the input being 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 . |
renderSeparator | component / function |
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. |
inputType | <input> type | false | text | The type of the input that will be passed to the input element being rendered. In v2 isInputNum used to set the input type as tel and prevented non numerical entries, so as to avoid the spin buttons added to the inputs with input type number . That behaviour is still supported if you pass tel to the inputType prop. |
shouldAutoFocus | boolean | false | false | Auto focuses input on initial page load. |
Do not override the following props on the input component that you return from the renderInput
prop. Doing so might lead to unexpected behaviour.
ref
value
onChange
onFocus
onBlur
onKeyDown
onPaste
onInput
type
inputMode
The v3 of react-otp-input
is a complete rewrite of the library. Apart from making the API more customizable and flexible, this version is a complete rewrite of the library using TypeScript and React Hooks. Here are the breaking changes that you need to be aware of:
-
You now need to pass your own custom input component that will be rendered for each of the input fields via
renderInput
prop. This gives you the flexibility to customize the input fields as you desire. This also means that props likefocusStyle
,isDisabled
,disabledStyle
,hasErrored
,errorStyle
,isInputNum
,isInputSecure
,data-cy
anddata-testid
are no longer supported. You can achieve the same functionality and more by passing the relevant props directly to the input component that you return from therenderInput
prop. -
The
separator
prop has now been renamed torenderSeparator
. This prop now apart from accepting a component that will be rendered as a separator between inputs like it used to, now also accepts a function that returns a component. The function will get the index of the separator being rendered as an argument. -
A new prop called
inputType
has been added to the component. This prop can be used to specify the type of the input that will be passed to the input element being rendered. The default value of this prop isnumber
.
react-otp-input
is now a controlled component to facilitate functionalities that weren't possible before from the application using it, such as clearing or pre-assigning values. For v1.0.0
and above, a value
prop needs to be passed in the component for it to function as expected.
cd example
npm run dev
- Write tests
- Add actions for lint checks and tests
Feel free to open issues and pull requests!
Thanks goes to these wonderful people (emoji key):
Abhishek Warokar 💻 🎨 🚧 🤔 👀 |
Aj 💻 🎨 🤔 |
Aromal Anil 💻 🔧 |
Gabriele Corti 💻 ️️️️♿️ |
Anoop 💻 |
Dewansh Rawat 🐛 |
Ishan Chhabra 💻 |
yaojie 💻 |
Prateek Surana 💻 🚧 🤔 📖 🎨 |
Süleyman Barış Eser 🐛 |
This project follows the all-contributors specification. Contributions of any kind welcome!