I have created a new npm package to take OTP Inputs, here is the why and how?

Before starting, please give a star to this project by clicking here.

A few days back, I was stuck with an #NPM package that is an #OTP input component (react-otp-input) module with an average of 65,000 weekly downloads. Quite good numbers. I was facing an issue that the package has a peer dependency of react v16 while I am currently working on v18, but I used the npm i react-otp-input with the -f option and forcefully installed the package. Sooner or later I realised that there is no effects on pressing the "enter" key while working with this package. The requirement was to hit the submit button on keydown. I had an option to put the package component under a form tag and use preventdefault() to fix it but it may generate any side effects too. Looking for the solution to the issue I was facing, I went to the Git repository of the package and found that there are a lot of bugs and issues with the package with no repsonse from the maintainer at all.

So, I decided to create my own package. I noticed that the package I have installed is licenced under MIT that means I can modify the package and publish it as my own with the modifications. So I took a clone and started working on the project. After lots of challenges and logic, I have published my very own NPM package over the internet with the name React18-input-otp.

I have tried different logics and almost tweaked the code to create this out and at the end, I have create an NPM account and followed these steps to publish the package using terminal:

1. cd react18-input-otp folder
2. Login using npm login
3. npm publish

That's it and your package will be live.

Codesandbox is here.

Now, let us talk about the package I have created:

The package is a fully customizable, one-time password (OTP) and phone number with separator input component for the web built with React. Tested on Web, Android, and iOS. This package supports all react versions.

You can use npm i react18-input-otp to install it in your web app.

Features of the package:

• A fully customisable OTP input package with support of React 18 and Typescript.
• It works great on both react and ionic app. Works like a charm on mobile too.
• You can specify only numeric inputs with inputNum prop.
• Works perfectly with clipboard paste feature on web and mobile.
• The only OTP input package on npm that supports 'enter' key to submit.
• Zero OTP paste issues on Android.
• Easy paste on iOS chrome, read from SMS feature.
• Supports onSubmit optional prop. You do not even need a button to submit.
• You can use this package for phone number inputs too.
• You can use this package for passcode fields too with inputSecure prop.
• You can provide custom css as well as input props to the React18-input-otp.
• 0 dependencies.
• Minzipped size only 3.6 kb.
• No open issues.
• No security bugs.

If you use OTP inputs in your web/mobile apps that are built over #react. Do give it a try and let me know if there is anything I can enhance.

Don't forget to follow me and to give this project a star!