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

preview_player
Показать описание

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
0:17 - Recap
1:07 - Prerequisites
5:47 - Write tests for props
12:06 - Write tests to allow typing of digits
17:27 - Write tests to not allow typing of non-digits
19:13 - Write tests to allow deleting of digits (focus on previous element)
25:04 - Write tests to allow deleting of digits (do not focus on previous element)
27:26 - Write tests to allow pasting of digits
33:34 - Write tests for handling arrow keys
38:04 - Outro

---

  1. Dominic Arrojado
  2. web development
  3. react
  4. typescript
  5. web development guides
  6. web development tips
Рекомендации по теме
Create Your Own 0:00:16

Create Your Own Font? Uncovering the Magic of Calligraphr

create your own 0:00:17

create your own character with this randomizer, and tag me! ⭐️ #originalcharacter #drawing #oc #art...

you can now 0:00:24

you can now create your own mob in minecraft... #shorts

How to Create 0:03:03

How to Create Your Own Roblox Clothing FREE - (2024)

How YOU Can 0:00:46

How YOU Can Create Your Own Country

HOW TO CREATE 0:00:47

HOW TO CREATE YOUR OWN APP IN 1 MINUTE #shorts

HOW TO CREATE 0:09:33

HOW TO CREATE YOUR OWN SKIN IN FORTNITE!

How To MAKE 0:08:01

How To MAKE a ROBLOX GAME on MOBILE...

CREATE Your Own 1:22:46

CREATE Your Own Food Delivery App with Android Jetpack Compose Beginner Tutorial E:19 |Cart Handling

How To Create 0:22:33

How To Create Your Own VPN (and why)

Create YOUR Own 0:00:13

Create YOUR Own Outfits On ROBLOX | How To Get Free Roblox Clothing Designs

Create your own 0:00:46

Create your own fantasy world

create your own 0:00:19

create your own character with this randomizer, and tag me! siren edition 🧜‍♀️ #originalcharacter...

Create Your Own 0:00:28

Create Your Own Cryptocurrency Without Coding Knowledge! #shorts #crypto #cryptocurrencies

How to Create 0:12:03

How to Create Professional Cartoon Music Videos with AI | in 10 mins

How To Create 0:00:45

How To Create Your OWN COIN? Tapswap Code I Made a Million Dollar Meme Coin In 10 Minutes FULL GUIDE

How to create 0:00:29

How to create your own Kingdom in Bannerlord | Subscribe for a free fief

Create Your Own 0:00:53

Create Your Own Talking AI Avatar for Free 😮 #aiavatar #aitool #aiavatars

Create Your Own 0:00:49

Create Your Own AI Models Like FraudGPT, PandemicGPT etc. With Just a Prompt!

How to create 0:00:12

How to create your OWN skin in Fortnite!!!

Create your own 0:00:35

Create your own AI without any coding for free | Mycaptain #ai #aitools

The POWER of 0:00:57

The POWER of the mind | create your own reality - manifest ANYTHING (Jack Canfield)

Create your own 0:00:43

Create your own vocals using these tricks! 🎤

create your own 0:00:46

create your own kdrama 💖 #kdrama #fyp #yt @divahere

Комментарии
Автор

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

DominicArrojado
Автор

Dominic, You just single handedly helped me to add a feature at my workplace. I was planning to make it from scratch, it would be a lot of work. But your repo helped me out soo much I appreciate it. Thanks bruv.

the-iter
Автор

There is a issue in this .. if directly type any number on last or any other field other than one... it will start typing from first field but the focus is in another field

prateeksinghchadha