Allow passing custom props to the inputs by adding inputProps prop

[vitorbertolucci]

• What does this PR do?

Allows developers to have more control over the input fields rendered by OtpInput component.

Resolves #318 Resolves #307 Resolves #274 And allows developers to deal with #2

It adds a prop called inputProps to OtpInput component that accepts either an object containing input props that should be passed to all inputs or an array of objects containing input props that should be passed to inputs individually.

Below are some examples:

1 - Passing an object to inputProps

<OtpInput
  inputStyle="inputStyle"
  numInputs={numInputs}
  isDisabled={isDisabled}
  hasErrored={hasErrored}
  errorStyle="error"
  onChange={this.handleOtpChange}
  separator={<span>{separator}</span>}
  isInputNum={isInputNum}
  isInputSecure={isInputSecure}
  shouldAutoFocus
  value={otp}
  placeholder={placeholder}
  inputProps={
    {
      name: "otp",
    }
  }
/>

In this example the name prop would be passed to all inputs. Here is how it looks like the demo:

2 - Passing an array to inputProps

<OtpInput
  inputStyle="inputStyle"
  numInputs={numInputs}
  isDisabled={isDisabled}
  hasErrored={hasErrored}
  errorStyle="error"
  onChange={this.handleOtpChange}
  separator={<span>{separator}</span>}
  isInputNum={isInputNum}
  isInputSecure={isInputSecure}
  shouldAutoFocus
  value={otp}
  placeholder={placeholder}
  inputProps={[
    {
      name: 'otp',
    },
    ,
    {
      name: 'third',
    },
    {
      name: 'fourth',
    },
  ]}
/>

In this situation the props will be passed to the inputs in order. So the first element goes to the first input and so on. Note that I left the second element empty which allows me to skip it and continue to next inputs.

Here is the result in the demo:

[ritikbanger]

We have a published a new OTP input package right here. Please use this: https://www.npmjs.com/package/react18-input-otp

[prateek3255]

This has been fixed with v3

[vitorbertolucci]

@prateek3255 the link to the migration guide on the release tag (https://github.com/devfolioco/react-otp-input/releases/tag/v3.0.0) is broken. Where can we find the migration guide to v3?

Turns out the migration instructions are on the project's readme.