React OTP Input Field With Typescript & Tailwind CSS

In this video we will take a look at how we can create OTP field using react and tailwindcss.

Social Media Links

#tailwindcss #react

[wisdomeshiet]

You know a great teacher when the same logic applies to a different concept... Thank you and God bless!

[georgesoriano]

Great Tutorial! Thanks more video to come

[adiodamilare]

this is amazing.
u help me solve the bug that took me four days .
thank you

[pedroh.belchioralves]

Thanks, it helped me too much, a hug from Brazil!!

[robertoribeiro]

That's amazing! Thanks for this tutorial

[codebreaker]

Amazing content and explanation, thanks!

[shinnthantminn]

awesome tutorial that was so helpfull for me

[jennifermagpantay]

Great explanation and video! Just in time to help me with a task I am working on! Thanks for sharing and congrats for the content!!

[hwkmtqk]

Well done man, and thanx a lot for hint ^_^

[MDMinhazulAlamChowdhury]

great tutorial! but I guess, the string slicing method is not required in an OTP field if you just use the maxLength property inside the input tag

[kukasn]

Please if you are using react js you might have issues after follow all the steps just add this block of code to make it work fyn
const handleOnKeyDown = (e, index) => {
currentOTPIndex = index;
if (e.key === "Tab") {
e.preventDefault();
+ 1);
}
if (e.key === "Backspace" && !e.target.value) {
e.preventDefault();
- 1);
}
};

[sallehshah]

Thanks alot, need this component for my day job.

[AkshaySingh-uwkj]

I want to start react native. Are you planning to make react native coourse? You have videos on it. But im not sure if that would be enough.

[brasilverdeamarelo.]

Would you like to make one for entering dates, and a regex to determine the numbers of days, month and year?

[philip.thomas]

Could u show login and logout in react with out google login

[gauravverma]

Help!!! I am using this otp input component....when I passing this otp value string or OTP array to its parent comp. Through setstate...its not working

[Shoutiez]

In case of user skip some input let's say [1]-[ ]-[3]-[ ]-[5] when i press backspace at last input (5) the number 5 and 3 not deleted and after debugging I saw that onChange event did not fire but onKeyDown did.
Do you have any idea how to fix this issue?

[aravindsanjeev]

You cannot copy and paste a verification code to this input box. It will just take the last digit and fill the first input.

[yasserhy]

Nice one, but there is a big issue with this video. Unfortunately, you did not provide the full working code for people to check. Getting the code from your video is not easy since you talk too fast and move the screen and cursor quickly which makes it difficult for people to follow.

[soulemotionshorts]

Not good coding practices used. Many features are missing such as pasting of otp.