People Really Like This New Component

The react ecosystem is growing by the day, now this?? People are doing some seriously good work, woah.
-- sources
otp input: input-otp.rodz.dev/
-- my links
saas: www.animate-code.com/
newletter: www.joshtriedcoding.com/
discord: / discord
github: github.com/joschan21

[@rodz]

I'm the library author and I really like your video ⭐ Thanks for the tutorial and the backend/2FA explanation! Btw, I'm dropping a new Vue.js version soon alongside React

[@gabrieltaveira]

Suggestion: add support for react-native. I've built countless OTP inputs there, as they're very common on mobile, and it's always unpleasant.

[@dMDzn]

I have one question. How does this component perform in regards to accessibility? I've seen implementations that use multiple inputs which buggers up screen readers.

[@Neil_09]

This library is better if it would be for react native

[@rodz]

@@dMDzn In terms of accessibility, `input-otp` only renders a single HTML input natively. That's why screen readers are able to announce what its content, unlike most libraries/implementations where developers create 6 inputs for 1 digit each.

[@rodz]

@@gabrieltaveira It would be awesome to get some help on RN implementation!

[@arthur_snow]

Rodz did such a cool job with this component, I saw the development happen in the live-coding he does on Twitch

[@daggalando]

OMG I’ve been looking for this for a long time, thank you so much!

[@robertm4934]

I love these library/component review videos - a handful of them including ShadCN and Aceturnity I am now using in all of my projects. I'm working on a project using essentially all ShadCN components and I'll tell you what - it's made the development experience 10x nicer. All component libraries need to be as standalone as Shad is.. there are tons of other UI libraries that I want to steal one or two components from, but often times they require you to wrap a provider and modify your tailwind config or global css styles which interferes with other libraries you may be using and just isn't as user friendly. Regardless keep up the good work Josh, I appreciate it!

[@outis99]

Exactly this! It's the reason I've stayed with Mantine on some projects where I need some really specific components Still love Mantine tho

[@codeaperture]

what dashboard template do you use? For Shadcn or whatever Tailwind ecosystem?

[@higormonteiro8314]

thanks Josh, this is a good video!!

[@khaledsanny4817]

Well, since I saw a package on npm to make additions... I knew I could not be surprised anymore 😂

[@Renzo-of3yn]

Cool video Josh! It would be nice if you make a video refers to the best practices in the authentication process using the most common technologies like next and auth v5 🎉

[@Alienovore]

It can be also really useful for Credit card input or IBAN etc

[@myjak_42]

can you make a video where you show how to add and use this in the digitalhippo projext?

[@brunopanizzi]

What about ? It's better to just add another dependency?

[@nazarshvets7501]

The real questions is: - Can i prefill inputs say with value from query? - Does it have propper auto-complete attributes to automaticly enter from navigator.credentials (autocomplete="one-time-code") - Does it handle copy+paste cases? If it would, that would be real deal, and I would probably switch to this solution, as current of mine give me headache figuring out this cases

[@rodz]

1. What do you mean "prefill inputs from query"? It's a native HTML input under the hood. Just its content and selections that are transparent. 2. Yes, autocomplete='one-time-code' is the default prop/setup as it is a native HTML input 3. Handles all cases of copying-cutting-pasting

[@developerpranav]

I thought it's a waste of time to watch a video on an OTP input component, but man this deserves a spot in shadcn UI!

[@irfansaeedkhan7242]

wow this is is really helpful

[@versaleyoutubevanced8647]

shoutout guilherme rodz 🇧🇷

[@yourboyman7410]

what is your opinion on django?

[@sahebbeshra7659]

when is going to be added in shadcn

[@filipfiser1045]

now

[@tymurkr]

this is a very easy, convenient, fast, and old way to confirm an account, and use a library for this...

[@zvrk]

Twitch has this for their website

[@kale_bhai]

This is what i ask in an interview

[@JohnFarrellDev]

Isn't this incredibly easy to do without an external library.

[@SaroVerhees]

I build one from scratch and it took me 2 full days to get all the little details right, think about focussing the inputs and triggering the keyboard on mobile without weird animations for example. Probably end up with the same bundle size anyways, so yeah, it's definitely nice to use a little component that already handles all the details for you.

[@rubendacostaesilva8442]

I wouldn't say incredibly easy, but it's doable.

[@justin9494]

oh hell na

[@Renzo-of3yn]

Bro, with all due respect, does anyone care if you create all your components from scratch? At the end of the day, your clients just want a beautiful and robust solution in less time. This component is very useful.

[@rodz]

I wrote this library after I realized I had spent 1-2 hours building a custom OTP input matching the design for a client of mine. The developer community deserved an easy way to build this, say in less than 2 minutes. Before implementing the lib, I checked what was Stripe's resolution to this kind of OTP input, but I don't think that's right as they render a single input with maximum of 1 digit and move the input around with CSS. That makes it inaccessible for screen readers since the input should have 6 digits maxlength instead. I found only one "good" way for rendering accessible inputs, which is rendering a transparent input on top of a custom CSS layout. That's the library's secret.

[@buddy.abc123]

I've just built this last week

[@matthewrossee]

what is the difference between sending an email with verification code and an email with verification link? is it because emails with links are somehow more prone to be detected as spam?

[@anguswett]

0:35

[@matthewrossee]

@@anguswett ???

[@codewithguillaume]

YESSSS

[@Di-yes]

Looks like there is really nothing to do that you cannot do by yourself. But OK, why not

[@fifty-plus]

Let's hope this is just a step to biometric and passwordless authn - the sooner the better. I'm sure people will butcher the backend implementation though, unfortunately.

[@DomskiPlays]

But does it work without javascript tho

[@rodz]

nope

[@rootbindev]

nice

[@Avi67673]

Bro can you please make an tutorial on how to create a AI photography tool to generate professional headshots of ourselves. Please. If anyone here can create a ai tool like this for me please share the budget.

[@filipkovac767]

you didn't explain what added functionality the lib provides...

[@rodz]

I guess the ONLY advantage of this over any other OTP input library is being able to implement WHATEVER design you want while still being accessible as it is a native HTML input under the hood

[@malekgara-hellal1777]

I know this component before u do

[@AbhiShake-pl3cf]

Yeah add 69420 packages for every single thing you can do in a minute

[@GarlikBaguette]

In the end it's all compiled and minified anyway. These libraries are optimized and weigh nothing. You can't do something like this in a minute.

[@AbhiShake-pl3cf]

I kinda agree. But what if they get discontinued? The point is, ui library is better when we can just copy paste it

[@rodz]

@ake-pl3cf it's not a UI library. It's a primitive, just like Radix UI unstyled components. What shadcn/ui does as a UI library is to provide styled components AND also install those underlying radix packages whenever needed.

[@AbhiShake-pl3cf]

@@rodz then it makes more sense but for a primitive, i dont like the use of render function

[@shinigami7364]

I personally hate these OTP inputs as a user. 1. Most of them don't let me paste the OTP. 2. The oncomplete is stupid as it will trigger the submission and then I have to wait for it to tell me the OTP is wrong which I could submit properly by my self. Normal inputs for OTPs are the best in terms of UX and DX both.

[@rodz]

1. This OTP input allows pasting code and also autocompletes from messaging apps automatically as it renders a native HTML input under the hood with "autocomplete='one-time-code'" attribute 2. the `onComplete` callback is optional.

[@davialcantara__]

🇧🇷🇧🇷🇧🇷

[@myrdddin]

that was i was looking for

[@aleksander5298]

Seems like another is-odd package that is useless, because implementation of this solution is very easy :) maybe it's good for some interns that don't know how to focus next input or trigger submit handler lol