feat(input): added callback for render of custom single input

[anchmelev]

Hello Muamar Al Farabi,

I've submitted a pull request that introduces a new feature to the getSingleInput method. This enhancement allows for greater flexibility and customization of the single input fields within the OTP component.

Here's a brief overview of the changes I've made:

• Added a getSingleInput callback that can be used to render custom input fields.
• Ensured that this change is backward compatible and does not affect existing implementations.
• Updated the documentation to reflect this new feature and provided examples of how to use it.

I believe this feature will be beneficial for users who need to customize their input fields beyond the default styling and behavior. It would be great to hear your thoughts on this addition.

Thank you for considering my contribution to your project!

Best regards, Andrei

[Ralfarios]

Hello, @anchmelev

Thank you for your first contributor, I really appreciate it. I've read your goals and what changes you've made. But before I review, could you give me an example of using this prop?

Thanks, R.

[anchmelev]

Hello @Ralfarios

Absolutely, I'd be happy to provide an example of how the getSingleInput prop is utilized in a practical scenario.

In our work projects, we are developing a uiKit based on the Ant Design framework, where we wrap Ant Design components at a foundational level. This approach is similar to what can be seen in the lightence-ant-design-react-template, which allows for a seamless integration of a base Input component with overridden Ant Design styles and extended functionality.

Here's a concise example of how the getSingleInput prop can be integrated:

<InputOTP onChange={setValue} value={value} getSingleInput={() => BaseInput} />

In this case, BaseInput is our customized input component that includes additional styles and functionalities on top of the default Ant Design Input. By using the getSingleInput prop, we can easily inject our BaseInput into the InputOTP component, ensuring a consistent look and feel across our uiKit.

I hope this clarifies how the getSingleInput prop can be leveraged. If there are any further questions or additional information needed, I am more than willing to provide it.

Thank you for your time and consideration.

Best regards, Andrei

[Ralfarios]

Hi @anchmelev

Sorry for such a late reply and thank you for the explanation. I understand why you created this insightful prop for the antd-input-otp. It would indeed be wonderful if we could inject our custom component into the OTP component.

I've checked your codes and tested it about 3 days earlier but somehow I cannot manage to inject the custom component just like you desire. Maybe you can provide me with full code in a code sandbox?

Currently, I got an error just like the screenshot below, and somehow the custom component has not yet been injected, so it returns to the default.

Cheers, Ralfarios.