Skip to content

This is a fully customizable React JS component that you use within your project to enable OTP Code submissions. This component does not make use of any external library!

Notifications You must be signed in to change notification settings

Octagon-simon/otp-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

otpInput-ezgif com-speed-1

Not playing? click here to view it

Watch the Preview

On YouTube

About

This is a fully customizable React JS component that you use within your project to enable OTP Code submissions. This component does not make use of any external library!

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published