Mastering Form Submissions in Remix with react-hook-form, remix-hook-form, zod, and Shadcn-UI

Рет қаралды 3,091

Күн бұрын

🚀 Mastering Form Submissions in Remix with react-hook-form, remix-hook-form, and Shadcn-UI | Full Demo and Validation
In this comprehensive tutorial, we delve into the intricacies of form submissions in Remix, the powerful React and JavaScript framework. 📝
Follow along as we break down the submission flow, explain serialization and deserialization processes, and conduct a hands-on demo using popular tools like react-hook-form, remix-hook-form, zod, and Shadcn-UI for a seamless form-building experience.
🔍 Key Concepts:
Form Submission Flow: Understand the behind-the-scenes workings of how forms are submitted, serialized, and deserialized in Remix.
Demo with react-hook-form: Witness a live demonstration as we create a form using react-hook-form and integrate it seamlessly into a Remix project.
Integration with Shadcn-UI: Learn how to install and use Shadcn-UI components in Remix for an enhanced and aesthetically pleasing form design.
Validation with remix-hook-form and Zod: Dive into the validation process using remix-hook-form and Zod, ensuring data integrity on both the frontend and backend.
🕒 Timeline:
00:00 - Intro
00:09 - How form submissions work
06:07 - Installing shadcn-ui in Remix
09:00 - Project init
09:20 - Form with shadcn components
09:47 - Demo of the form
10:17 - remix-hook-form setup and form enhancements
11:24 - Extending the client side form
12:30 - Extending the server side part
14:27 - Client field tracking and improvements
15:37 - Final demo
15:58 - Seeing our final validated data and additional notes
17:21 - Outro with the cool bird
🔧 Tools and Libraries Used:
[react-hook-form](react-hook-form.com/)
[remix-hook-form](github.com/Code-Forge-Net/rem...)
[Shadcn-UI](ui.shadcn.com/docs)
[Zod](zod.dev/)
👉 Subscribe for More:
If you find this tutorial helpful, consider subscribing for more deep dives into Remix, React, and JavaScript frameworks.
🌐 Connect with Me:
Twitter:
/ alemtuzlak59192
Github:
github.com/AlemTuzlak
Blog:
alemtuzlak.hashnode.dev/

Пікірлер: 64

@dragoninfintyskull 4 ай бұрын

If there are any errors, react hook form (client side) will show there error and the remix’s action won’t even trigger right ?

@alemtuzlak 4 ай бұрын

Correct, until your data is valid client-side it won't be sent to the server

@dragoninfintyskull 4 ай бұрын

Cooooll, thanks for the video

@alemtuzlak 4 ай бұрын

@@dragoninfintyskull you're welcome 🤗

@codernerd7076 4 ай бұрын

I'm looking at Remix now after failing to build anything good with Next.js! your videos are a huge help! Thank you!

@alemtuzlak 4 ай бұрын

That is truly amazing to hear! Glad you're enjoying them, will release more in the future! If you have anything you'd like me to cover let me know

@dquangvn1467 15 күн бұрын

Amazing!

@alemtuzlak 14 күн бұрын

Thank you!

@alemtuzlak 14 күн бұрын

Thank you!

@wiseafter 18 күн бұрын

Great explanation, thanks ✌🏼

@alemtuzlak 18 күн бұрын

Thank you 🙏🏻

@dadkis Ай бұрын

Good job! Very useful! 👍

@alemtuzlak Ай бұрын

Thank you!

@Bateleur90 4 ай бұрын

Nice work on making this package! And also props to you for trying to have it be a part of react-hook-form 🙌

@alemtuzlak 4 ай бұрын

Thank you so much! Hope you enjoyed the video too!

@destabiliseus 4 ай бұрын

Solid work! Thank you a lot

@alemtuzlak 4 ай бұрын

Thank you!

@kajotaese-uu7qm 4 ай бұрын

Amazing work!!

@alemtuzlak 4 ай бұрын

Thank you 🙏🙏

@AlexBlack-xz8hp 3 ай бұрын

This is super cool! Thank for making this.

@alemtuzlak 3 ай бұрын

Thank you Alex! 😊

@ShahnawazSayyad 4 ай бұрын

Wow nice to know that you are the creator of Remix Hook form.. thanks. 👍

@alemtuzlak 4 ай бұрын

Thank you! Yeah, among other things, also created remix-development-tools 😅

@ShahnawazSayyad 4 ай бұрын

Awesome .. @@alemtuzlak 🌟

@adiswa123 3 ай бұрын

This was extremely well explained, I was looking into how to use shadcn forms with remix and this gave me the perfect path forward :)

@alemtuzlak 3 ай бұрын

Thank you so much! Glad you enjoyed it!

@adamlevoy 3 ай бұрын

The diagrams and explanations before the code are extremely helpful and unique to lots of web dev tutorials out there. Thanks

@alemtuzlak 3 ай бұрын

Thank you Adam!

@alemtuzlak 3 ай бұрын

Thank you Adam!

@eleah2665 4 ай бұрын

Alem, I just found you. I love Remix. Thanks.

@alemtuzlak 4 ай бұрын

Glad you enjoyed it, thank you for watching!

@LeoMiranda 2 ай бұрын

Great job Alex, thanks

@alemtuzlak 2 ай бұрын

Thank you Leo! And it's Alem 😅

@LeoMiranda 2 ай бұрын

@@alemtuzlak Sorry, I aways see Alex on Twitter 😅

@alemtuzlak 2 ай бұрын

you are forgiven! this time @@LeoMiranda

@lenghak_hok 3 ай бұрын

You got yourself a new subscriber, sir.

@alemtuzlak 3 ай бұрын

Thank you kind sir 🙏😊

@yooujiin 3 ай бұрын

Great content!!!

@alemtuzlak 3 ай бұрын

Thank you so much 🙏😊

@yooujiin 3 ай бұрын

@@alemtuzlak welcome. please keep doing more tutorials. it's helping me a lot. can I request some topics?

@alemtuzlak 3 ай бұрын

@@yooujiin ofcourse!

@simoncollins7040 Ай бұрын

Super useful video Alem and remix-hook-form looks awesome! BTW your handle for X in your KZfaq bio needs updating.

@alemtuzlak 25 күн бұрын

Thanks so much for letting me know, I'll update them soon! I changed it and forgot to update :(

4 ай бұрын

Nice work! I was actually kind of hoping that for example number inputs stay numbers in FormData instances, but no… 😁 Strings, like you said. Regarding validation, would it be fine to return status code of 400 on validation error, or would that break the flow due to error boundaries or whatnot? Super excited that this exists for Remix now, and that the perspective is to get it eventually into react-hook-form itself!

@alemtuzlak 4 ай бұрын

Yeah, I feel ya, this is also the case for anything else, booleans etc. It would, the only difference would be that you get a console.error in the browser that the request was a 4XX or whatever your statusCode is. This was actually one of my first remix OSS, has been around for a while now. I'm working with the react-hook-form team to get all of these things merged into there so you don't have to have a wrapper at all!

@jaydenmayger1359 3 ай бұрын

Hi Alem, thank you very much for this package. I have been trying to pass a fetcher to useRemixForm and I am obviously doing something wrong because I can’t get it work. Could you please add some content / advice on passing a fetcher please?

@alemtuzlak 3 ай бұрын

Will naturally be doing that in lster parts when I start adding functionalities in. Although you should create a discussion on the repo and I can help out 🙊

@LeoMiranda 2 ай бұрын

Hi AleM 😁I'm testing this solution, it's very amazing, thanks! Shadcn's Form components has accessibility attributes, there is some way to use it with Remix? Thanks!

@alemtuzlak 2 ай бұрын

Hehe now you got it right. Hmm whoch attributes are you talking about exactly? You could probably add them by hand but probably nit a good idea 💡

@TheDrokon 4 ай бұрын

How do you compare remix-hook-form to the form library conform?

@alemtuzlak 4 ай бұрын

I think Conform is amazing, if I personally didn't prefer react-hook-form and that ecosystem I would pick conform in a heartbeat. Edmund is doing an amazing job with it and the API is very similar to remix-hook-form. I would definitely recommend it as an alternative if you don't want to use react-hook-form!

@ronreyes1294 4 ай бұрын

How do we handle pages with multiple form submissions like there is a create and a delete submission?

@alemtuzlak 4 ай бұрын

I usually prefer doing these kind of things with resource routes and fetchers, another alternative is having two forms with different intents and then having an action differentiate between the two with the intent

@ronreyes1294 4 ай бұрын

@@alemtuzlak thanks Alex for the quick response, i have a follow up question. For example I have two forms on a route(not a single form with multiple actions) then each form have their own set of schema, so i would need to create two instance of RemixHookForm? in the action how would i get the intent because if i use getValidatedFormData i pass the specific schema so i will not be able to check the intent. But if i get first the formData using the "await request.formData" to check the intent, the problem is when getValidatedFormData runs there is an error "body used already for: localhost:XXXX" how would you go about this scenario or this might be a design issue on my part?

@banafish 3 ай бұрын

I have the task at work of building a site with internationalization with lots of forms. Wow you channel is perfect! I don't like how Next.js tries to lock in to Vercel so Remix it is. I have to deploy to AWS and might use SST. Do you have any opinions/tips for deploying Remix apps?

@alemtuzlak 3 ай бұрын

Thank you so much! Man I wish I could help but haven't done anything with SST yet, although if you're up for it you can ask on the remix discord, there are a bunch of people there that have done stuff like that and would be happy to help!

@banafish 3 ай бұрын

@@alemtuzlak I'll take a look there, and again, thanks for this channel! Super helpful and informative.

@alemtuzlak 3 ай бұрын

@@banafish thank you so much! It's really appreciated!

@keepforever726 4 ай бұрын

Setting input values onChange and onBlur has a "controlled inputs" feel to it, but, I noticed that those inputs are not getting a `value` passed to them, so, they don't resemble the "classic" look of controlled components. It kind of felt like an inbetween controlled and uncontrolled.

@alemtuzlak 4 ай бұрын

Yeah it is in-between, it's uncontrolled in a sense that you don't provide the value and yet you store it onChange. I feel like you get the benefit of not having to controll them but the ease of just giving the component a callback

@Klobi500 28 күн бұрын

I`m new to remix. is this here a validation on the serverside or only client?

@alemtuzlak 25 күн бұрын

Both actually!

@AkashaQaiser42 2 ай бұрын

how to upload image and strings in one form (in one action) that is too complex and no one make a video on it yet...

@alemtuzlak Ай бұрын

here is a simple implementation of a csv handler that I've created recently: ```ts export const uploadHandler = (): UploadHandler => async ({ data, filename }) => { const chunks = []; for await (const chunk of data) { chunks.push(chunk); } const buffer = Buffer.concat(chunks); // If there's no filename, it's a text field and we can return the value directly if (!filename) { const textDecoder = new TextDecoder(); return textDecoder.decode(buffer); } // either store it in memory and return it or convert to string or whatever you want to do with the file if (filename && !filename.endsWith(".csv")) { return null; } const file = await yourFileHandler(buffer); return JSON.stringify(file); }; ```