Introduction
Have you ever wondered how the one-time password screens on an app or webpage work? These are the screens that have multipl...
For further actions, you may consider blocking this person and/or reporting abuse
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.
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.
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:
usePasscodewhich makes it easier to use and you won't require to reinvent the wheelAdded a hacky example of input squares using inline-svg background.
VERY THOROUGH ARTICLE 💪 GOOD JOB!
Great article!
Cool article!
Love this article, keep up the good work!
Always encrypt passcode data before you store!
Just trying to save any devs out there preemptively.
This Looks quite helpful. Thanks for your interest and feedback on this article. Will surely try out in that way!
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).
plus here's a recent article on how (and why) to implement it: dev.to/madsstoumann/using-a-single...
@boredcity thanks for the feedback. Yes, this looks a very good approach to solve the issue. Thanks for sharing this article!
What did you use for your GIF animation?
This could be a rare case but you can also include Tab action for accessibility reason
don't you get it out of the box with inputs?
But do you see it was slow down in the component when typing faster and it did not fill enough numbers as my expectation
@17edwin yes, I have observed this behaviour as, I am currently working on resolving the performance issue