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

3 ай бұрын

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

3 ай бұрын

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

3 ай бұрын

This library is better if it would be for react native

@rodz

3 ай бұрын

@@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

3 ай бұрын

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

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

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

3 ай бұрын

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

3 ай бұрын

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

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

thanks Josh, this is a good video!!

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

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

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 🎉

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

3 ай бұрын

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

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

YESSSS

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

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!

wow this is is really helpful

shoutout guilherme rodz 🇧🇷

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

This is what i ask in an interview

Twitch has this for their website

what is your opinion on django?

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

@SaroVerhees

3 ай бұрын

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

3 ай бұрын

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

@justin9494

3 ай бұрын

oh hell na

@Renzo-of3yn

3 ай бұрын

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

3 ай бұрын

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.

when is going to be added in shadcn

@filipfiser1045

3 ай бұрын

now

I've just built this last week

nice

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

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

3 ай бұрын

0:35

@matthewrossee

3 ай бұрын

@@anguswett ???

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.

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.

But does it work without javascript tho

@rodz

3 ай бұрын

nope

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

@rodz

3 ай бұрын

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

I know this component before u do

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

@GarlikBaguette

3 ай бұрын

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

3 ай бұрын

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

@rodz

3 ай бұрын

@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

3 ай бұрын

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

🇧🇷🇧🇷🇧🇷

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

3 ай бұрын

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.

that was i was looking for

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