You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* ♻️ Rewrite OTPInput core
* ✨ Add new example
* 🔧 Update build steps
* 📝 Documentation updates
* ♻️ Make text the default type for input
* ✨ Add a select input for type in demo
* 🔥 Remove unused assets
* 🐛 Fix focusing next/previous input not working when using arrow keys
* 🔖 v3.0.0
* 🐛 Hotfix for type error in example
* ♻️ Create isInputNum for checking number inputs
* 🔧 Add newline at end of file
* 📝 Udpate readme
<td>A function that returns the input that is supposed to be rendered for each of the input fields.
73
+
The function will get two arguments: <code>inputProps</code> and <code>index</code>. <code>inputProps</code> is an object that contains all the props <b>that should be passed to the input being rendered</b> (Overriding these props is not recommended because it might lead to some unexpected behaviour). <code>index</code> is the index of the input being rendered.
<td>Specify an expected value of each input. The length of this string should be equal to <code>numInputs</code>.</td>
87
96
</tr>
88
97
<tr>
89
-
<td>separator</td>
90
-
<td>component<br/></td>
98
+
<td>renderSeparator</td>
99
+
<td>component / function<br/></td>
91
100
<td>false</td>
92
101
<td>none</td>
93
-
<td>Provide a custom separator between inputs by passing a component. For instance, <code><span>-</span></code> would add <code>-</code> between each input.</td>
102
+
<td>Provide a custom separator between inputs by passing a component. For instance, <code><span>-</span></code> would add <code>-</code> between each input.</td> You can also pass a function that returns a component, where the function will get the index of the separator being rendered as an argument.
<td>Style applied or class passed to each input when errored.</td>
122
+
<td>text</td>
123
+
<td>The type of the input that will be passed to the input element being rendered. In v2 <code>isInputNum</code> used to set the input type as <code>tel</code> and prevented non numerical entries, so as to avoid the spin buttons added to the inputs with input type <code>number</code>. That behaviour is still supported if you pass <code>tel</code> to the inputType prop.</td>
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:
137
+
138
+
- 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 like `focusStyle`, `isDisabled`, `disabledStyle`, `hasErrored`, `errorStyle`, `isInputNum`, `isInputSecure`, `data-cy` and `data-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 the `renderInput` prop.
139
+
140
+
- The `separator` prop has now been renamed to `renderSeparator`. 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.
141
+
142
+
- 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 is `number`.
143
+
144
+
## Migrating from v1
182
145
183
146
`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.
0 commit comments