React-OTP Component

This is a highly customizable React JS component that you use within your project to enable OTP Code submissions.

View the live demo here

INSTALLATION STEPS

Please note that this component does not make use of any external library and this means that you can literally copy these files src/otpInputs.js && src/otpInputs.module.css into your project and you're good to go

You can also run the project directly on codeSandbox

After cloning the repo or downloading the source code, run npm install to install all dependencies.

$ npm install

When the dependencies are installed, and you encounter a babel error, run the command below to resolve this error

$ npm install --save-dev @babel/plugin-proposal-private-property-in-object --legacy-peer-deps

Now Fire up your server 🔥

$ npm run start

Visit the server at http://localhost:3000 to view the app

CONFIGURATION

• From v1.1, autoSubmit is configurable when you call the component <OTPInputGroup autoSubmit={false} />.

  • If you set this prop to true, the form will call the submit function once all boxes has been filled, otherwise, you need to hit the submit button for the form to be submitted.

• This simple app supports both Numbers and Letters.

  • If you need only numbers or letters, be sure to modify it to suit your project.

Read the article here

On Medium

PREVIEW

Not playing? click here to view it

Watch the Preview

On YouTube