People Really Like This New Component
Vložit
- čas přidán 26. 02. 2024
- 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 - Věda a technologie
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
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.
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.
This library is better if it would be for react native
@@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.
@@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!
Rodz did such a cool job with this component, I saw the development happen in the live-coding he does on Twitch
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!
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
what dashboard template do you use? For Shadcn or whatever Tailwind ecosystem?
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 🎉
can you make a video where you show how to add and use this in the digitalhippo projext?
wow this is is really helpful
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
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
What about ? It's better to just add another dependency?
shoutout guilherme rodz 🇧🇷
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!
YESSSS
Isn't this incredibly easy to do without an external library.
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.
I wouldn't say incredibly easy, but it's doable.
oh hell na
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.
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.
this is a very easy, convenient, fast, and old way to confirm an account, and use a library for this...
Twitch has this for their website
when is going to be added in shadcn
now
what is your opinion on django?
This is what i ask in an interview
nice
I've just built this last week
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?
0:35
@@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
nope
you didn't explain what added functionality the lib provides...
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
that was i was looking for
Yeah add 69420 packages for every single thing you can do in a minute
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.
I kinda agree. But what if they get discontinued?
The point is, ui library is better when we can just copy paste it
@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.
@@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.
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.
🇧🇷🇧🇷🇧🇷
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