DEV Community

Cover image for Create a passcode component from scratch in React

Create a passcode component from scratch in React

Keyur Paralkar on July 16, 2023

Introduction Have you ever wondered how the one-time password screens on an app or webpage work? These are the screens that have multipl...
Collapse
 
soanvig profile image
Mateusz Koteja

Just use normal input with letter-spacing and create a mask over it in CSS in whatever way. It will be simpler, and handle everything as it should.

Collapse
 
neil585456525 profile image
Neil Chen • Edited

It might will be a little bit not convenient to add border, radius , other styles and put a dash in the middle of the sentence.

Collapse
 
keyurparalkar profile image
Keyur Paralkar

Thanks for reading this article @lukeshiru. Yes the solution you provided is easier but create a mask is a bit tricker.

You can try out this library I build: react-headless-passcode. It provides a hook: usePasscode which makes it easier to use and you won't require to reinvent the wheel

Collapse
 
boredcity profile image
boredcity • Edited


Added a hacky example of input squares using inline-svg background.

Collapse
 
panayiotisgeorgiou profile image
Panayiotis Georgiou

VERY THOROUGH ARTICLE 💪 GOOD JOB!

Collapse
 
leandro_nnz profile image
Leandro Nuñez

Great article!

Collapse
 
vdelitz profile image
vdelitz

Cool article!

Collapse
 
caroline profile image
Caroline

Love this article, keep up the good work!

Collapse
 
catsarebetter profile image
Hide Shidara

Always encrypt passcode data before you store!

Just trying to save any devs out there preemptively.

 
keyurparalkar profile image
Keyur Paralkar

This Looks quite helpful. Thanks for your interest and feedback on this article. Will surely try out in that way!

Collapse
 
boredcity profile image
boredcity

Definitely an interesting approach highlighting a lot of useful React concepts 👍

But I'm still on the "just use a single input" side of the debate and so, aparently, is Google: web.dev/sms-otp-form (it's also pretty useful to learn how to auto-suggest codes from SMS).

Collapse
 
boredcity profile image
boredcity

plus here's a recent article on how (and why) to implement it: dev.to/madsstoumann/using-a-single...

Collapse
 
keyurparalkar profile image
Keyur Paralkar

@boredcity thanks for the feedback. Yes, this looks a very good approach to solve the issue. Thanks for sharing this article!

Collapse
 
kainoah profile image
Kairus Noah Tecson

What did you use for your GIF animation?

Collapse
 
xinranma profile image
Xinran-Ma

This could be a rare case but you can also include Tab action for accessibility reason

Collapse
 
boredcity profile image
boredcity

don't you get it out of the box with inputs?

Collapse
 
17edwin profile image
Thai

But do you see it was slow down in the component when typing faster and it did not fill enough numbers as my expectation

Collapse
 
keyurparalkar profile image
Keyur Paralkar

@17edwin yes, I have observed this behaviour as, I am currently working on resolving the performance issue