How to create your own OTP input in React and TypeScript with tests (Part 1)

Learn how to build a modern OTP input component in a reactive and reusable way.

#dominicarrojado #react #typescript #reactjs #otp #webdevelopment

Timestamps:
0:00 - Intro
2:30 - Prerequisites
4:14 - Initialize your project
6:04 - Clean up the project
7:06 - OtpInput component
14:34 - OtpInput styles
14:34 - OtpInput styles
16:15 - OtpInput props
19:31 - Construct array from value prop
26:27 - Allow typing digits in input boxes
35:04 - Allow deleting digits from input boxes
42:51 - Select digit on focus event
47:01 - Handle paste event
51:44 - Improve accessibility

---

[DominicArrojado]

There has been changes to the Final UI/Code repository to fix a couple of issues on focus:

[Hereisvito]

Wow, keep going man, one of the best React/JavaScript/TypeScript YouTube video that I've ever seen.

[ocraniawanpatattan]

wow, this video is awesome!
I really like the way you explain every single thing in such a great detail!
it's very helpful and I learn a lot from it, thank you.
keep it up! I'm definitely subscribe to your channel!

[Mattelab]

Great tutorial, really informative!
Question for you, I'm looking to only allow letters (case insensitive) instead of numbers. I assumed it would be as simple as replacing the RegExp with (/^[a-z]+$/i), the input pattern with pattern="[a-zA-Z]{1}", and removing the inputMode. Unfortunately it still accepts non-letters until I delete a character. Any idea what's going on here?

[samananwarkhan]

Awesome tutorial!! Can you please tell me how to add validation error in it?

[AvinashSingh-trvt]

awesome, please make more react typescript videos, Thank you

[parameshwaran]

Awesome tutorial bro. I have an issue with this. After copy pasting the otp, select the random input box like (3rd or 4th other than the last one) and try to delete using backspace. I'm unable to delete it. I can replace the number with entering other number but i would like to delete it using backspace.

[vidhikapadia]

Aewsome, Can you please tell how to automatic autofoucs first input element when user first time open application ?

[amitrana]

OSM Video. But, I am not able to get the length of the OTP, once you fill in all the 6-digits OTP, the length value doesn't change after 6 length.

[naveenkumarreddybaddigam]

There is an error in the functionality.
ERROR:
if you type in one input box and move to the fourth or fifth input using arrow or tab key, the second input is being filled.