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

hi everyone my name is dominik garago i'm a web developer and these are guides tips and tricks to web development so in this video i'm going to show you how to create a otp input in react and typescript and also learn how to write tests for it using jess and testing library so otp inputs is basically the most common way to verify a user if they really own that email or for example mobile phone so i've seen a lot of otp inputs out there so some are like just one input box some are in separate input boxes so it's an input group and you can type one digit per input box so i use a lot of them and some of them doesn't give me the great user experience that's because they're not following the best practices on how to create an otp input so for example i am pumped with an otp in a mobile phone i press it in one of the input box and when it focuses it will show the keyboard but eventually it will just show the alphabet keyboard and that's not really good if your otp only supports djs right you don't need to show the alphabet so that's one second one thing is for example i'm using a ios i'm not sure if android does this but in ios if you receive an sms it should suggest in the keyboard the code that you need to fill in and once you press that suggestion you automatically fill in the code in the input boxes but then some web applications don't they actually don't suggest it or if they do if you press it if you press the suggestion it will not fill in the rest of the input box you will just fill in the first input box which is again not a great user experience and for lastly for example it's also a separate input boxes if i type in one of the digit it should automatically focus to the next input box and again web applications some web applications don't do that so i'm a little bit frustrated of how some of the input boxes were implemented so this is why i created this video to you know share what i think should how it should be done it may not be the perfect solution but i hope it helps developers out there to know what are the considerations and best practices when building this otp input all right so i'm going to show you later what it will look like and yeah i think let's let's start all right so this is what an otp input i'm talking about so it's not just a one input box because if we do that then this video would be shorter and worse the challenge in that so we're implementing the otp input in separate input boxes each of them will be one digit per box so i'm going to type in one two three four so you can see it automatically focus to the next input box and then i can also delete it so i'll delete the first one it's still here and then if i do another delete or pressing the backspace it will focus and delete the previous element and it will do so again and i can also paste my code right here so i'm just going to copy this and i can paste it anyway i can paste it here let's delete that again i can face it nonetheless and it will still work and lastly i can also go through each of them using my arrow keys so i'm pressing left key right now i'm pressing right key i'm pressing down key and pressing up key all right so this is what we're going to build by the end of this video and yeah i guess we can start a couple of assumptions right here is that you know a little bit of web development um um basics and concepts and you know react and css html but if you're new to typescript or writing tests in jess and testing library then i will make this a beginner friendly video so don't worry about that but as long as you know the concepts of react then i think you're you'll be fine so two fastest way to get started with react and typescript they have a template here that you can use so let's copy the script to create the create react app so it's the officially supported way to get started with um so you just copy that code and replace this with the project name that you want so i'm going to use react type script otp input we actually already run this before to make this video quick so once you press that just quickly open your project in your terminal so i'm using visual studio code as my ide you can use that as well because i am using extension right here which is prettier it's a code formatter to help us code format our code and it saved us time i also have the [Music] react es7 so it helps me it provides some snippets for me to use so that it also helps me to write code faster and for the ptr there's a settings that you need to do in that vs code settings json and the configuration so feel free to use that as well okay so i guess let's test whether this is working fine first you can do that with yarn start which is one of the scripts in the package that case on so we are in start this will start the development um setup for your react app [Music] all right so it's running fine everything that means this is working so now we can do some cleanup so i'm just going to delete [Music] the contents of app.css delete the tests [Music] then we don't need the code right here and we can do an asterisk um sizing we want it to be border box so that our width and height are always followed strictly and we don't need the logo as well so in the app component we can make it ramp first and replace the class name as container i'm just going to change this like this you don't need the logo and yeah let's see if everything is still working fine i'm refreshing the page and yeah so the next thing we need to do is basically create our component so normally i like to put all the components i create in a components folder so we just need one component which is the otp input so because this is in typescript our convention in filename for type react jsx is tsx so tyscript jsx and i'm using a snippet right here to create a react functional component using the vs code extension that i installed so in here i'm just going to be adding last name multiple group and then [Music] yeah let's start with this i'm going to go back to the app.css so i'm basically going to style the container so width will be 100 px max speed will be 100 for mobile on the margin to be here auto and padding to be 20 px and 15 so that's it for the container and let's go back to the otp input what do we need to do now so basically in this input box if we refer back to our final code we need to display six input boxes so what we can do we can hard code this first to make it easier for us to see we have six elements in this array and you can loop it so this is how we look in react basically this will be the value for the digit and you can also get the index from the from the loop and we just need to basically loop in the key we're going to use index as the key this is needed for react to know what the it would be like the id of each element all right so if you go back to our infinite likes here nothing is displayed because we haven't imported it yet or we can continue so what does this input box need to be so first we need to add in the type so it might seem intuitive if you use input type numbers because anyway we are only typing in digits but the problem with this maybe i'll just import it here first this will show you problem with using type number is that you'll get this arrow keys which helps you to increase or decrease the number and that's one thing we actually don't need these arrows because we're typing in the code and yeah that's mainly it and we don't want that and it's usually used for you know incremental values not numbers for an otp code it's used really for numbers like working with money or you know quantity and our codes are not in quantity they are like string digits so that's one thing so i don't suggest using number and some websites before actually use telephone so the probability telephone is that it supports asterisks and hashtag and again we don't want that we don't need to support that so we're going to use text but in text if you focus on this in mobile it will actually show you the alphabet keyboard and there's a way to resolve that you're basically using input mode numeric basically when when you pass this attribute to the input it will basically show the number keyboard instead of the alphabet so this is what we need so type text and input mode numeric so what's the next thing we need to add is the autocomplete so this attribute is really important because this is how it will auto suggest to you automatically suggest to you the input the one-time code in your keyboard this is how ios does it i'm not sure if android already does this but it's good to already support this in your otp input box so this will be one time code so autumn complete actually has different kinds of value you can pass and as you search ground or you scroll down you can see the one time crawler here so you see it's used for verifying user identity this is what we need so i highly suggest to add this so that it gives a great user experience for those using ios and eventually i think other os will support this okay what's next for this is the pattern so patterns uh accepts regular expressions so it's a javascript term for you know regular expressions well you know basically the pattern of the character so in our input box we basically support digits and only one one digit per box so how can i do this so in regular expression we have this slash d which means it should be a digit and we can put a curly brace and add one so this means that it should be a digit and it should have a length of one this is what we need for the pattern so what is this for actually so it's for example if you wrap this otp input in a form this will basically help the browser to enforce that pattern so for example that form is submitted it will check whether the pattern is um [Music] followed if it's not it will show like a browser error so that is really helpful you know enforcing the form validation so what's next so max link next length it will be may it may seem intuitive if we put one but i'm not going to do one here i'm going to use the value link which is what we're going to get from the props so this means that for example we have six input blocks the max will be six why am i doing that because we are going to allow pasting of the digits in any of the input box and we need at least six depending on how many boxes we are going to support in order to get the whole value in the input so that's why it's max and don't worry if suddenly [Music] there's six characters in one box that won't happen because we have the logic later to always prevent them so we'll just leave this as six for now and what's next so we need to add the class name here which is going to be opt input so otp group otp input we can style this later and let's just leave that for now let's add the styles for this input so i create a css file and i'm going to import it we need to do so the otp group will be displayed in flex so that they're one row side by side we want the weight to be hundred percent maxwell to be maybe g6 then we can add a column gap so the gap between the input boxes will be cut okay so how about the input we want it to be percent with you basically just follow the otp grid and if there's many input box then you will divide the width depending on the parent container height will be 60px border will be like something grayish border ridges 5dx pixels texas line you want it to be center font size to be 33 pixels right height to be one and point weight maybe let's make it as 700 or bold okay let's see what okay now you can see that it looks like the react otp input that we have right here maybe let's just add the title on the top correct typescript input all right so you can see it looks just exactly the same now all you need to do is basically add the props for this otp input so if you're new to typescript this is how you define uh or initialize in object props so props are basically objects that you can pass into the component so you can actually do it like this so you add a column props and what does this props contain or what should it accept so it should accept a value so this will be a string so if we didn't pass anything you can see that typescript is already doing its work it's basically saying that value is missing in the prompts so that's why typescript is really helpful on you know catching bugs early on so we'll uh worry about it later let's just define the rest of the problem so next um props that we need to add is the value length so how many input blocks are you going to be supporting so here we're going to support six so that then we want it to be reusable so [Music] we're gonna depend on the value length to display how many input boxes are there and then lastly it will be that one change and the unchanged will be a function that accepts an argument value string so because value our value here is a string it should also be a string this will basically help us update the parent state outside of the input so if the value changes and then that is how it's going to display the value in the the individual input boxes so i think that's this is it for our props so you just written your first typescript code so now let's try to solve the error of the typescript so we can you can add a state here maybe otp and then set otp let's just leave it as an empty string point off import it from the act and for the unchanged basically just get the value string set the otp with the value all right so i think we can now pass it here value will be the otp value length we can put s6 on change it's gonna be the only change so now there's no more typescript error because we have satisfied the props because this is a string this is a number there is a function that accepts value as a string and we can set the otp to update the state so yeah let's see what now what happens okay so in the input box you can actually add the value here this will be the digit so this coin is going to display one two three four five six in the input boxes all right great so what do we need to do next so we we want to basically change this hard-coded array into an array depending on the value so for example this is down to 3.56 then it should display we should construct an array that is one two three four five six so same goes for six four five six five four three two one it will be something like this all right so how do we do this so actually it's very easy to basically just use dot split is a javascript string method so it will basically convert anything that is empty space so anything is simply spacious in between these numbers so it will convert into an array but then again what if we just have three string we still want the array to be the length of six it should be like one two three and maybe this is an empty space this is because we want to steal this basics um input box but not but not all of them will be filled in so how do we achieve this so let's get into the code you can actually basically [Music] use use memo this is one of the react hooks features which basically helps you calculate do your calculation with a dependency so our dependency right here will be value and value length so anytime this either of these two changes the use memo will be updated so this will be the value array or maybe use value items i'm going to use use memo from react import it from react and the dependency will be value and value length so what do we need to do here so basically we need to construct an array from the value and it should still the array will have a length equal to value left okay so how do we construct this so first let's basically create that array or initialize that array so when you hover on this um array you will basically say it's an array of any so basically it doesn't have the type could be anything and that's not really helpful for typescript later on you place an issue saying that you need to provide the type so what you can do here is basically help typescript to define the correct type for this array this will be an array of string so now if you hover onto it it will be an area of string now what we need to do we can return this array then we need to construct the array here so we can do a loop basically a simple loop you basically look until the value length right and we can also get the value to get the value array split this remember we can split it and basically when we loop in we can get the character or the digit maybe it's digit or any character first because it's not we don't know if it's a digit or not okay so every time we look we basically access this value array so it can be like one two three all right so once we reach like four five six it's um it's gonna be undefined so we can do that if car is there then we push it to the array if it's not let me just push an empty string this way we can always have um array that is equal to the value length and we can do more here we can basically check whether the value or the character is a digit and i mentioned this earlier we can use the javascript regular expression to basically check whether this character is a number i know you might be thinking we can why not we just use typo is equal to number it's because none is also a number we can have a better way of checking this you can basically use a javascript expression so [Music] my new rejects so using what we learned earlier slash digit is in means that it should be a digit and we need to add a couple more things so basically it should begin so this one should begin and this should end basically this is the mean this means that it should end so this whole rejects basically means that it should be a digit from any um from the whole string itself so from the beginning to the end it should be a digit in the middle as well so using this you can do a test and if this is true means that is a number if it's not then we just push a empty string to the constructed array so now we have constructed an array we can basically now replace the hard-coded array with the value items let's see if this works so when we refresh it we get a one two three so it actually works now you see that this it fills in one two three but keeps the still displace the other input boxes but unfilled so let's try this again let's replace the state 265 watch it to one and there you go it still works one one one and there you go so even though the string is four in length it still displays six um input box and you can even reduce the input box to make it or increase it to seven and there you go it still works you want 10 input box all right let's just rewrite that to 6 again and keep this as empty you see that it's empty it's still displaying c6 input box all right so what do we need to do next now we can handle the typing as you can see if i type doesn't do anything it doesn't change the input box so we need to handle it so in this case we can add the event listener right here so input on change and we can pass it here on change so in react is actually a change event handler so in order to access the event we need to pass in the type as well we can add change events and then the type of the element so this is a html input element you can just pass it as the argument right here this is how you can access the event data and passing the correct type for that event data so if you so for example you add in a different type here you see that it causes an error because this input element it doesn't meet the type that you have defined so it is not an anchor tag it's an input element so we need to change that we'll fix that all right so what we need to do now is basically get the value from the target so we can get the target from readback target and target value should be targeted value and yeah we won't be allowing anything that's not a digit so abcde are not digits we can do a check here so target value using the same one so since we're using it i'm going to be extracting this and create a constant ps create a concept very very happy so regular expression or digit will be this one so now we can import it here digit now i can use the same our digit test target value this is a digit this would be true so we need it to have a exclamation exclamation point which is not true and return it so anything that's not a digit we won't do anything but if it's a digit we basically have to construct the array so for example uh let me show you for example we replace three right here we need the other input um or digits to remain the same so basically we're replacing the string which is in the middle or either whichever input boxes i am so basically i have to keep the positions of this digits so how do i do that so since this is a loop we basically have access to the index index basically is the position of the element in the array so what we can do here is basically replace it with anonymous function pass in the event and the index so now if i try to pass an index it will throw an error because we don't support that in the argument again one of the benefits of typescript we catch already errors right away so now i have the access to the index of the input box what can i do with it so we can basically use substring so to explain some string basically you can access a part of a string using the index so for example um 1 4 let's use this as a example so if i put inject zero to pour it will get h and until here like hell you see i run it i get the hell so if i just put the number um 3 here without the second argument i'll basically get so from index 3 to the rest so let's say let's make this 5 again i get from index five to the rest until the end so we're going to use this to basically construct so first of all we already have the inlets that we're going to replace basically let's construct the new string for example i have one two three four five six string here and i'm index three so the tree here is index um zero one two so it's in index two we basically need to get one and two first because one and two the big c start from zero and the index that's how we get one to two and then we need to get four five six so what we need to do is basically solid string again but just the first argument and that will be index plus one so we added plus one here because we're going to put the new value in the middle so we can now replace it with something else like six or one or nine zero nine this is how we construct the string so in case you get confused we just we can just test this right away so let me just change this so we haven't reconstruct the props okay so now the string will get updated on change that's because on the parent element we have the unchanged here and it will set the odp so let's start with an empty string and let's test this so let me type one well there you go once you see if i can i type other digits it goes to the other input box but my focus stays on the on this particular input box which i started so we can fix this by basically getting the next element beside it so that you will focus the next and then you type in you get this uh [Music] like you get this experience so how do you do that let's get the next input element or the next element sibling and we can get that from the target to target the next element sibling and then if it does exist because for example you're here no nothing is beside it anymore like next to it so it may cause an issue if we execute a certain function that doesn't exist so we need to do let's check it so if it does exist we want to focus on okay so we get a typescript error right here focus function does not exist in element because this when you hover on the next element sibling you only displace element or no it doesn't know what exactly what type of element it is so some elements doesn't have the focus function so we need to help type script right here so this is called type assertion so when you know more than typescript you basically help typescript to define the type so this is using the ask keyword you basically put it is an input element or it is no so now the error is gone because we help typescript to define or replace the correct type so now it is html input element or not great so now let's test this out um let me replace it with an empty string okay so i type some digits and as you can see it focuses to the next simple which is great so it's almost looking like an otp input now what we need to do we basically cannot delete so let's handle that i cannot delete anything i'm pressing backspace but it doesn't let me delete this digit so how can we do that so if we go back to our input on change we're basically checking if it's a digit and empty string is not a digi so it will not run anything or not do anything at all so we can actually allow that so that we can handle the duration part so if it's not a digit and it's not a repeat string then we don't allow that but if it is if it's a empty string then we allow that and also if we gonna replace something in the string in the middle we cannot use an empty string we need to basically use something that's not a digit so that it will remain empty or unfilled so for example we delete something here we need the rest of the digits to remain in their input box so their position shouldn't change so how do we do that we basically can replace the empty string with a space so this is what i'm going to do so if target is a digit so we can create a concentrate with target value and digit so if it's a widget then we just use the same value but if it's not then we're going to use empty space so to visualize this basically we have this array right we replace i mean we have this string right and it converts to an array if we replace three our logic this in in the above we basically make this like this means the other the other numbers shifted to the right and this is not what we want we wanted to keep keep the position right here and just replace this with a space so that's why we added it with a space because once it goes to this logic it will become an empty space so that's fine as long as there's a character that can split them correctly you can split them correctly to their own position and that's why we're using the empty space so i hope that explains it so maybe we can test this out and just to add uh um what here a logic here we don't want it to focus to the to the next element if we're deleting it so we're going to add this target not a digit let me just return it so it only focus on if we added something or we input a digit if it's not if we're deleting it we shouldn't focus to the next element so let's test this out i'm gonna refresh one two three four five six i'm going to delete there you go it works really i cannot delete i can delete in the middle as you can see four five six is still remain intact same for one two as well i can delete this as well and yeah everything is still intact so that's what we want so what should are we done yet knowing we can still improve this otp input so basically when we delete you see i'm pressing delete again but i'm expecting to delete the previous elements so how can we handle it actually when we delete right after the deletion the on change doesn't trigger anymore because you're not changing anything in this particular input element so that won't get triggered so we need to rely on input edam this is one of the keyboard events and we can attach it here one key down all right so again we can add the type for the event data um key down keyboard event will be a keyboard event from react we can add an argument that it is an input element all right we start with the value first and target that so let's see what this it do so we cannot get the target because the type of the target is a event target again we can help typescript right here we know that the target is a html input so once you replace this now the error is gone and in input key down we can actually access the key so basically what key in the keyboard are you pressing it could be backspace arrow keys so that will give us the that data so let's see what happens i'm going to open my console right here from google chrome you can use inspect to show that and yeah let's type in right here as you can see the key here is six and i press something again meta i'm going to press backspace as you can see backspace was there and it still gave me the 6 as the value before that change happened so now i'm going to press backspace again as you can see it is now empty so what basically what we want to do is if we have a value in here the focus would remain here we don't want to focus to the previous element because we might be changing the value only in this input box not the previous one so that's why we want to remain here for example i actually input the wrong digit in the last so i'm just deleting this one but after this if i want to press backspace again i should delete this previous element because i want to go back and fix maybe somewhere four or five are wrong so how can we do this so as you can see if it's empty then that's what we want to do so basically we can add a logic here if it's not a backspace or the target net value is not empty we don't want to do anything so we are returning it so we are returning from here but if it is the backspace and the value is not m is empty then we can do focus to the previous element so this will just be the opposite of next sibling previous element sibling all right so now we can do this let's try this out by in one two three four five i delete i'm still here i delete again boom nice that is working like this great so it's the same as what we are going to accomplish now what we do we do next what do we do next so what we can do is basically the selection so for example i have these digits right here i want to replace three so sometimes if i type it on the right chord you see that the cursor and the other on the left will be either on the right if i'm on the right side or the course is on the right side if i press a digit it should replace 3 but then it replaces this digit and as you can see the rest of the numbers move and that is not actually correct basically what we want to do if we press on three we want to replace it with a different number not the next element so how do we fix that you can basically add a input on focus so basically when we click on it this is on focus so on that event we want to select the tree so you see if i'm selecting and i change the number it is working correctly so i focus here i change this boom so it's not moving any of the input boxes it's basically just replacing that particular input box and boom i do a selection how do you do this so in javascript you have this um [Music] function that you can do a selection like how i select this like you see the blue highlight that is called the selection so you can use um set select range i'm going to show you in a bit so this will be uh again a react event focus event of the input element and we can do we can get the target and target that set selection range so this is how we select it accepts the start and the end index so we start from zero and we just basically target value that like i can use this or i can use one because i know it's always one digit per input box so i'm just gonna leave it like that and let's see what happens so i have one two three four five i focus on this as you can see it automatically selected the input box and i select here and there you go so sometimes it doesn't work so as a precaution we want to add the same logic in the target when we do the key down event so where can we add that we can add it here we can maybe use a we can create a target that value here means this is repeated two times all right and yeah we can add it here just to you know put the selection range position so even though it changes here we know that behind it it will always select once we type a digit so this uh requesting digits must type or for example that selection is gone when you type it still remains the same so let's see how does it work now one two three point five six i replace this boom it still works and for example the selection is gone okay it still works so you see i replace it with two booms so it still works so our otp input is working is fine now i can replace this with four five four i wanna repeat from the start six five four three two one and it works all right so what else can we do here so let's handle the face event so for example i want to paste it here you see that it doesn't work as correctly it does change the inputs but it's not working as what we expect so for example i wanna paste something here on the start it's correct but if we want to paste it here you not working as correctly you see that it moves the all of the elements pushed back but we want to replace the whole thing so what can we do so i'm not going to change i'm not going to add another event listener here like on paste we're not going to do that because on change actually is already triggered once that the base event happens as well so what we can do is basically check the length so i also don't want to support you know pasting or for example i'm just copying a four digit code but this is a six digit code if i paste that shouldn't do anything because it's not the code that we want we want a six digit code so what i think is the best practice is basically if we copy a six digit code and that that is allowed for the handling of the pace event if it's not then we won't do anything i think that's i think that's what makes more sense so well we can check so if we're here let's see it's a digit and it's not is it empty or not empty as long as it's a digit we can check the target value left so from this point target value could be you know one it will be two three four five six because it is a digit but we're not doing the checks here so we're doing the check here we check the length so target value length is one so this is a one digit we're not doing pasting so we can copy paste this and do just that okay but if it's targeted by length for the length of the new character is the same as the value length then we do the pace here so it's actually just very easy you can just change you can just call the on change and passing the target value because target value is the six digit code that the user or us or the user has copied and after we do the paste we can just basically do a dealer so it's the opposite of focus because most likely on for example mobile right you do a paste you're most likely going to submit the code so you don't need the keyboard anymore so we are going to do the blur so i progress something right here so on the base event we want to basically trim the value because for example users when they receive the otp input on i mean the otp digit codes on the email email platform that they're using they might copy with an extra space on the right or it may be on the left and we just want to make it better we want to give them a better user experience by basically removing those and it's still a six digit code so this pasting event would still happen because it's equal length with the value line so yeah just forget i just forgot to add this a while ago so please add it in your code as well all right so let's see if this works so one two three four five six i'm going to paste it maybe in the middle boom it replace everything and it blurred out so i can immediately just submit the code so let's try this again i paste it in the first input box and there you go it still works again let's try this i'm going to paste at the last last input box and there you go you replace everything so the handling of the pace is working fine so what else can we do are we done almost we just need to handle or basically improve the accessibility of our input box so what we can do is basically you know i can do an arrow right arrow left or up and clearing up and down but i expected i expected to basically focus on the previous element or for example and here i'm going to press right it should uh go to this one so in action you can see that you see i'm using my arrow keys to basically go through the input boxes so we want to implement that as well so we can handle that in the key down so as you can see we already have the key down event to check that we are pressing backspace so what is the key for the arrow keys let me just show you in the console log so you can have the arrow right left up and down so these are the keys that we need to check so we can add the check we can edit here key you can basically get the key now in the target on the event using the construction then we can replace this equal to arrow right and our right is basically just the same as the arrow down on behavior so we want to basically since this when you do the error right at our left it is a default browser behavior and we want to prevent them to prevent that we can use event prevent depot okay so what do we do now so basically we want to when we press arrow right we should go to the next element and we have this function we know this is the function right and i just want to reduce the duplication i don't want to add it here again it just it it just duplicates the code so i want to create a function on top here focus to next input i accept a target input element and we also add the focus to the previous summit again it will be the same one but instead of next it will be the previous sibling okay so now we can do some refactoring here you can just do target you can also do a target focus to previous input target and here we can do a return focus to next focus to next input so we're doing a return so that it doesn't need to run the [Music] code below okay so we can just copy this for arrow left and right up focus to previous input okay i think we're done right here yeah we can test this out so i'm going to test this again and i'm going to press arrow left boom there you go it's working fine i'm pressing our left or right up down and yeah so i actually forgot some one more thing i actually forgot to replace next link with kylie lamp here in this case our input box will be dynamic so whatever we change the value length here that will be reflected um on the input box as well we can only place six digits so yeah don't forget to add that part to basically replace the max length with the value length that is all i think that is it you basically built your own otp input with a great user experience if you want to test this out in your mobile as well you can do so it will show you the keyboard mobile keyboard with the numbers only it won't display the alphabet and also if you receive an sms with the input codes it will suggest to you as well if you're focused on the input box so that's great so we are actually done now in the implementation part you can proceed to watch the next video to you know learn how to write tests for this otp input component so i'll see you in the next video bye

Channel: Dominic Arrojado

Views: 4,982

Keywords: web development, react, typescript, web development guides, web development tips, web development tricks, node, nodejs, front end development, front end, frontend, development, web app, web application development, technology, web, html, css, javascript, web technology, web application, jest, unit test, reactjs, otp input, one-time password, one-time password input, one-time code, otp, otc, otc input, one-time code input, best practices, component test, unit testing, component testing

Id: Qpo4gUfv2Fs

Length: 56min 45sec (3405 seconds)

Published: Fri Jun 17 2022