menu

React Hook Form

📋 Custom React hooks for form validation without the hassle

Channels
Team

React Hook Form Input

November 22, 2019 at 10:52am

React Hook Form Input

November 22, 2019 at 10:52am (Edited 2 weeks ago)
Help out testing new wrapper component for MUI, AntD and React-select. react-hook-form-input

November 22, 2019 at 11:04am
  • reply
  • like
latest version: react-hook-form-input@1.0.8
  • reply
  • like
Can you tell me what the difference is now? Because I used some of the MUI components directly with React Hook Form without any issues.
Edited
  • reply
  • like
The main issues I was having with it (tho not directly) is with file inputs. And I had to create my own component to support my use-cases.
Edited
  • reply
  • like

November 22, 2019 at 10:41pm
Oh it's just sugar syntax and you won't have to register manually and unregister when component gets removed.
  • reply
  • like

November 23, 2019 at 3:10pm
Thanks so much, it's working now. Updated to the latest version and component syntax. All good now.
  • reply
  • like
There is no way to set defaultValue though. If I use the value prop it won't update on change. Any idea how to do this?
  • reply
  • like
Here's a demo
Edited
  • reply
  • like
try useForm({ defaultValues: {} })
like-fill
1
  • reply
  • like

November 24, 2019 at 6:32pm
Thanks! This made it work :)
  • reply
  • like

November 25, 2019 at 1:04am
i am still making improvment on the component itself
  • reply
  • like
keep the feedback coming
  • reply
  • like
we can all make this works better for everyone
  • reply
  • like

November 25, 2019 at 8:03am
Would it be possible to make it even more transparent by providing the same component name as the material-ui? eg instead of import { TextField, ... Radio, } from "/core"; you'd import them from react-hook-form', modify each component to add the register and setValue attributes and voila?
  • reply
  • like
not sure what you refer to
  • reply
  • like
react hook form input is a genric component
  • reply
  • like
not only made for MUI
  • reply
  • like
ah, got it thanks. going to play adding my own wrapper (on the top of the react-hook-form-input one, wrappers all the way ;) and see if I get something working
like-fill
1
  • reply
  • like
why not contribute to react-hook-form-input with your idea
  • reply
  • like
if yours works better happy to implment yours instead
  • reply
  • like
So I tried to clone the repo and add a TextField. I bumped into two problems 1) typescript that I do not know, 2) I was trying to create TextField as a wrapper around RHFInput, but -obviously- react complains that the Hooks can only be called inside of the body of a function component. Not sure how to unblock myself, I'll continue the useEffect and finish what I started earlier (how to leverage better html5 native validations and error messages)
  • reply
  • like

November 25, 2019 at 10:44pm
that required attribute for MUI is specfic for MUI right?
  • reply
  • like
it's not native html5 constrain API
  • reply
  • like
it's a prop of MUI
  • reply
  • like
Show more messages