React OTP Input Field With Typescript & Tailwind CSS

no matter how hard i try to be consistent on youtube i couldn't because of my some silly reasons but finally here i am back again with another video and in this video we will see how we can create this awesome otp input files using a react gs for the programming language we are going to use typescript and for the styling we are going to use delvin css and this is the tiniest and the smallest part of the 40 hours of content where you will learn about how we can create full stack movie review application with admin panel using monstaq and if you want to know more about this then i will put a link in the description box below you can watch a video and think about if you want to purchase this course or not but for now let's see how we can create this awesome otp input field like i already told you here we are going to use a react with typescript and if you don't want to use typescript then you can simply remove these types and this will be the javascript and for the styling we are going to use television css and these are the television css classes and i'm not going to waste your time by showing how you can create this ui or how we can set up this television css with react and all these kind of things if you don't know all these things you can simply follow the documentation and if you use these code then you will get the simple looking ui for this otp input well and here let me tell you one more thing for the class name i'm using this spin button none and this is the class name that you will not get inside television css for this i'm using these custom code from the stack overflow and i'm using this because let me show you why i'm using this now if i remove this code then inside these otp files you can see we have this tiny little indicators to increase or decrease these numbers and we don't want this so that is why i am using this class and the custom css properties now let me explain a little bit here what is going on first of all here we have this state to render these six otp input fields and here this is an array with these six items and they are empty nothing is there and here we have there's a little thing uh with these span and some class names and thus each for these little dashes if you don't want these you can remove this as well okay now let's go to this input field and directly try to handle this on change event and first of all we have to create this handle change right here and because we are using typescript i'm going to use this wide and i'm going to tell this function that we are going to return void from inside this function and inside here we need the value and here we have this event and if you try to use this e.target and all these kind of things inside typescript you cannot do that you have to mention specifically that you are using react.change event okay and here you have to pass the element that you are using which will be html input element like this and now if i try to use this e dot target dot value and all these kind of things i can use them okay now what i'm going to do i'm going to directly structure this target like this and from inside this target i'm going to destructure the value like this and now the main thing is here we have this value and now if i log this to the console let's go back to our code i'm going to open this console and now if i type something here you can see we have this one two and three and this is the otp input field we just want to accept this six otp and we don't want to accept more than one value from inside a single otp field okay so for that what we can do here we have this one two three and this is string if you don't know inside this input element if we read the value from inside the input element these will be string so what we can do we can use this sub string method and now if i use the substring method and if i want to only grab the value like this 3 because this 3 is at the end what i can do i can pass the index of this 3 which will be 0 1 and 2 and as you can see here we have this 3 and i'm passing this end as 3 and as you can see this is an optional value because here you can see this question mark and this 3 is not because the value is 3 this 3 is because 1 2 and 3 okay let me change this so that you can see what it means okay so first of all what we are doing we are using this uh substring method and passing the index of this four and we are counting this three from the beginning one two and three okay if you don't want to you can simply use this too and it will give you this very end value so for this what i'm going to do i'm going to use this value dot sub string and here we are going to pass the value dot length because we don't want the exact length of this value and we are going to subtract this one and if we do this then we will get the last index of this value okay now here what i'm going to do i'm going to store its value inside this valve just to show you guys and now if i save this and now no matter how much value that i type here i'll get at the last value only now like this we will get the last value from inside these otp fields and now we want to update these values inside this otp okay now because this is an array so we cannot directly add these string inside here we have to play a little trick and that is because this is an array and we are rendering these input files from inside these arrays and also we have to know the index of these otp files so that we can update the correct value from inside this array let me show you what i mean okay so for that what we need to do here we need to also accept one more parameter called index and the type of this index will be number like this and now we can come here as you can see here our typescript is complaining so i'm going to use it like this and here we'll have this event and now we have to pass this event inside here and the index like this okay this index is coming from inside this map method now we have this index so what we can do we can create right here i'm going to create this new otp and this will be empty array like this and now what we can do we can use this new otp and we can use this index and we can update its value and update the otp from here let me show you what i mean now i'm going to cut everything out like this and i'm going to use it like this also if you want to because we are using typescript you can use this string of array the tie for this new otp and typescript is not complaining at all and now because here we want to use the said otp and we want to spread this new otp or we don't even need to do like this we can simply pass this new otp but if you don't want to lose the previous value you have to spread old otp like this okay now this will give us the new otp and if you want to see what you can do you can log this otp outside of this handle change and let's see if we get something here you can see we have the six empty values now if i type one here to here three four five six currently to move these into fields i'm using the tab key but i don't want to do this i want this to be automatic okay so for that what we can do we can create the reference of this input well i'm going to call it input ref and let's use this user effort and the type will be html input element and here also we need to pass this null otherwise typescript will complain now inside this input what we need to do we need to pass this reference hook not like this reference look like this and here we are going to pass this input riff and typescript is not complaining so what we need to do now is we can use this use effect hook and inside this use effect hook we can use this input riff dot current dot focus and here you can see my typescript adds this question mark here because this input ref dot current can be undefined as well so if there is this input rift dot current then call this focus now if i save this and reload everything then here you can see at the end we have this input field and this is focusing on its own but at the beginning we want to focus at this input field here at the beginning okay so for that here what we need to do we need to come down or going to come up and let's say create another state and i'm going to duplicate this one and i'm going to call it active otp index and for the type here we are going to use this number and by default the value will be zero and now let me show you why i created this state and this is because here what we are going to do we are going to use this index if this index is equal to this active otp index then this will be this input ref otherwise this will be null okay like this and now if i save this file and reload this app then you can see now we are focusing on the very first input element and now whenever we type something here we want to move this cursor to the next otp field and for that we just have to increase or decrease that active otp index state okay and for that inside this handle on change what i'm going to do i'm going to use the set active otp index and we are going to use this index plus one now if i do this and let me reload everything here if i type something here now here we are updating the value of this active otp index but here also inside let's use if it took what we need to do we need to pass this active otp index as the dependency because here we want to fire this logic or we want to focus on this input ref whenever this state update occurs so now if i save this let me reload everything now if i type something here it will move to the next otp field like this but here you can see i can type multiple value right here now we want to fix this as well so for that what we need to do we need to go inside this input and we need to fix its value and for that you can pass this value and here we are going to use this otp and we are going to use the current index or the index of this input to add the value from inside this otp okay now if i save this here you will see this warning let's reload everything like this and the warning is gone and now here we can type these values and no matter how many value i type here the value will stay from inside that otp field only okay now the main thing here is whenever we press this back space key we want to move to the previous one as well and for that here what we need to do we need to also add one little logic here if there is no value then we want to focus to the previous input field so for that say active otp index which will be index minus 1 and here we need to now add this else and if there is no value we want to focus to the previous input field otherwise we want to focus to the next input field okay now if i save this and i'm going to reload everything for now let's add these values right here and if i press this backspace key here you can see i'm moving back but here we have a little problem now i am inside this third input field and now if i press backspace key nothing is happening and that is because whenever this input field is empty and if we try to press this backspace e nothing will happen means at the time the on change event will not fire so for that we have to add one more logic here inside this input field what we need to do we need to add one more thing and that will be on key down okay so here i'm going to create this handle on key down i'm going to quickly create this right here and again from inside here we want to find out the key so here we'll have the event and because here from inside this event we want to grab the key we have to pass the type of this event and that will be react dot keyboard event and here we need to pass this html input element like this and now here we can use this e dot target dot or e dot key only right like this so from inside this event i'm going to directly structure this key like this so let's check if this key is equal to backspace because if you just want to see this you can log this key to the console if you press anything here you will get this inside this console and this is the backspace if you press this backspace you will also get this inside this console okay now here we are going to check this if this key is equal to backspace we want to fire this logic like this and now here we also need this index so for this what we need to do we need to also take this index and the type will be number like this and let's come down here inside this we have to now repeat the same process like above here we'll have the event and here we have to pass this event and the index now let's save this file and let's see if something happens or not inside this handle on key down we are just checking for this key if this is backspace then we are subtracting this one from inside this index and updating this active otp index so that we can move to the next input field or i mean we can focus the previous input field let's see if we can do something here now i'm going to add these values and if i press this backspace key you can see we have some weird result and that is because from inside this react 18 what is happening whenever we have this keyword down event after updating these states your handle on change will also fire means whenever we are using or whenever we are fighting this logic what is happening first of all this event will fire with a different index and at the next it will fire this handle on change as well and in that case the index will be different and you will see there's a weird kind of effect like this okay and to handle this we cannot moderate this react the behavior of this react after react 18 this is happening i don't know why this is bug or this is new feature i don't know at all but this is happening and we have to also fix this for that what we can do we cannot alter the behavior of this react so we have to handle this index so for that i'm going to create this current otp index okay and the type will be number like this and the default value will be zero now let's come down and what i'm going to do inside here instead of this index instead of taking this index inside this handle on change i'm going to remove this index from here let me format everything and wherever you are seeing these errors we have to now change them with our current otp index okay like this and now let's come down here you will also see this error now we don't need this event so what we can do we can remove this function invocation and we can remove this error function and everything will be fine here now the next thing that we need to do whenever we have this index inside this handle key down because this is the function that will fire before this handle on change what we can do we can use this current otp index and update its value right inside here and here instead of this index we are going to use this current otp index okay now if i save this file and let's reload everything now i'm going to use this one two three four five six and if i press these back as key everything will be fine and also if i'm inside this empty input field and if i press this back as e i will be in the previous one so that's it that's how we can create this uh otp input field inside react using television css and typescript i hope you enjoy watching this video and learn something new if that's the case then don't forget to hit that like button subscribe if you haven't already and i'll see you guys in my next video and don't forget to check out the full course from where this video came out and inside that course i already told you there i will teach you how you can create or build this full stack application or full stack movie review application using one stack

Channel: Full Stack Niraj

Views: 25,199

Keywords: tailwind css, tailwind css tutorial, react js, react otp field, react typescript otp field

Id: 1Mz07nptjWU

Length: 19min 29sec (1169 seconds)

Published: Fri Jun 03 2022