3 ms·

i love love love remix, am so glad i chose it a couple of years ago and now use it for everything that said, i wonder if anyone has advice on a couple of thing

i love love love remix, am so glad i chose it a couple of years ago and now use it for everything that said, i wonder if anyone has advice on a couple of things 1. typesafe routing and fetching, e.g. using useFetcher then fetcher.submit({title: 'hi'}, {action: '/blog'}). i would love both the {title: 'hi'} and the 'blog' to be typesafe (as safe as you can get in typescript) 2. i still haven't got onboard with using uncontrolled inputs, so i end up using react hook form again. i feel like eventually i need to "watch" one of the inputs, and the main thing again is the typesafety. with react hook form, i can declare my form with zod and be sure it's exactly what i'm then submitting to the server, and revalidate it there. any good ideas here? i would love to get the progressive enhancement from not using js

aniforprez 3y ago
1. There was one library that would generate types for your routes but it doesn't work properly with the new vite config. I think one of the contributors is working on a library to add that to vite 2. I use remix-hook-forms. It's got helpers that validate on server side and lets you send the errors back to the client and that will display the error on the frontend. This way you can have server side additional validations and send those errors to the client
whoishiringbrad 3y ago
Have you seen conform.guide? It just became 1.0.0. It's pretty similar to react-hook-forms -- but it's a lot more remix-y.
- willsmith72 3y ago
  i tried it but it seemed like i'd need to create a new react state field manually to "watch" the fields myself, which was a bit of a turnoff. makes sense you can't watch it before js has loaded, but it's such a common use case for me
  - ecuaflo 3y ago
    Tesla has a nice one that seems to make this easier [0] [0] https://teslamotors.github.io/informed/api-reference/useFieldState https://teslamotors.github.io/informed/api-reference/useFiel...
jackbravo 3y ago
I like using https://www.remix-validated-form.io/ https://www.remix-validated-form.io/, which you would use to get a type safe validated object before doing the submit. And then you could reuse the validator on the backend as well.

aniforprez 3y ago

1. There was one library that would generate types for your routes but it doesn't work properly with the new vite config. I think one of the contributors is working on a library to add that to vite 2. I use remix-hook-forms. It's got helpers that validate on server side and lets you send the errors back to the client and that will display the error on the frontend. This way you can have server side additional validations and send those errors to the client

whoishiringbrad 3y ago

Have you seen conform.guide? It just became 1.0.0. It's pretty similar to react-hook-forms -- but it's a lot more remix-y.

willsmith72 3y ago
i tried it but it seemed like i'd need to create a new react state field manually to "watch" the fields myself, which was a bit of a turnoff. makes sense you can't watch it before js has loaded, but it's such a common use case for me
- ecuaflo 3y ago
  Tesla has a nice one that seems to make this easier [0] [0] https://teslamotors.github.io/informed/api-reference/useFieldState https://teslamotors.github.io/informed/api-reference/useFiel...

jackbravo 3y ago

I like using https://www.remix-validated-form.io/ https://www.remix-validated-form.io/, which you would use to get a type safe validated object before doing the submit. And then you could reuse the validator on the backend as well.