search

react-hook-form / react-hook-form

📋 React Hooks for form state management and validation (Web + React Native)
https://react-hook-form.com
MIT License
41.45k stars 2.08k forks source link

Maintained Material-UI bindings #986

Closed chrissantamaria closed 4 years ago

chrissantamaria commented 4 years ago

Describe the solution you'd like react-hook-form offers lots of really great ways to use existing input components in forms such as Controller or useFormContext. However, this still requires work on behalf of developers who want to get started quickly with an attractive UI kit. On a recent project that used Material-UI, I had a lengthy component file dedicated to creating simple bindings between my used MUI components and react-hook-form.

The Formik community has a solution to this in the form of formik-material-ui, a set of community-maintained bindings to easily use MUI components with Formik. Things such as error coloring, helper text and disabled fields are built in to these custom bindings that hook into Formik's state.

I think react-hook-form could benefit from a similar solution quite a bit as it would greatly reduce the barrier of entry when trying to use an attractive UI kit on projects.

Describe alternatives you've considered

Additional context

CodeSandbox demo of formik-material-ui's functionality

cargallo commented 4 years ago

Hi @chrissantamaria I don't know if you tried it but RHF has a Controller component wich wrap controlled components like MaterialUI ones. It doesn't cover all of them but for sure the common ones. If you need code please let me know and I can help you. Reggards!

chrissantamaria commented 4 years ago

I've seen that, yeah! Like I mentioned in my original post - it's a great solution for integrating with existing components. MUI actually supports control with just refs as well so that's not really my issue - I'm more looking to hook into MUI-specific fields like error, helperText or disabled to provide more functionality than just basic input.

This TextField component from formik-material-ui may help clarify what I'm suggesting here.

bluebill1049 commented 4 years ago

hey Chris thanks for your great suggestion. I think my focus will still be on react-hook-form at the moment, I am pretty much running full capacity with my day job and open source projects, (not complaining, I am more than happy to contribute my free time towards the community) It would nice someone else take this initiative and build such third party lib tho.

cargallo commented 4 years ago

@chrissantamaria I came from Formik and used those libraries that you mention, but the majority of them gave me problems in the long term. Because its difficult to cover all the possibles behaviours, what I finally end doing was to copy the code of that libraries into my own code to personalize each component. Anyway it could be a good idea to have them. Reggards!

bluebill1049 commented 4 years ago

I am going to close this issue, and if someone interested in such a project. feel free to contact me and i can assist and help promote the package at our website.

chrisparton1991 commented 4 years ago

hey @chrisparton1991 thanks for your great suggestion.

Hey Bill, you got the wrong Chris again 😁

bluebill1049 commented 4 years ago

omg, you always pop up as the first one... sorry...

chrisparton1991 commented 4 years ago

No problem at all 😄

chrisparton1991 commented 4 years ago

Hey @chrissantamaria, some totally unsolicited advice here sorry, but while the background image is loading on your website the text is sitting against a white background for a couple of seconds.

Maybe add a background-color: #282c34; alongside the image?

Your website and resume both look awesome though!

chrissantamaria commented 4 years ago

@bluebill1049 I'm definitely interested in taking the lead on this once I have a bit more time! I might need to bounce some ideas off of you regarding how to best integrate with react-hook-form but it should be a fun side project 😄 is email the best way to reach you?

@chrisparton1991 definitely appreciated! I'm currently refactoring the whole site to use Gatsby which will let me have a nice blur-up animation as the image loads. Just haven't gotten around to fixing a few bugs + deploying haha

bluebill1049 commented 4 years ago

@chrissantamaria yea, you can reach me via email, twitter and spectrum message :)

bluebill1049 commented 4 years ago

I am pretty confident you can do most of the MUI components with a wrapper + Controller

chrissantamaria commented 4 years ago

Would it be better to use a Controller rather than just a ref?

bluebill1049 commented 4 years ago

Yes controller is better

chrissantamaria commented 4 years ago

Could you explain a bit why that is? From my (admittedly limited) understanding of this project, part of the appeal was that the ref-based approach led to fewer renders. Wouldn't a Controller eliminate this benefit?

bluebill1049 commented 4 years ago

hey chris controller will isolate the re-render at the component level, so your form and app is not getting re-rendered.

chrissantamaria commented 4 years ago

Hm, interesting. I was basing my initial thought off of this FAQ question on the react-hook-form site, but your answer makes sense. Maybe that's worth clarifying on the site?

Also, I think you meant @chrissantamaria 😛

bluebill1049 commented 4 years ago

that Chris autocomplete is super annoying... sorry Chriss if you land here again. @chrissantamaria would you like to improve the doc and send a PR?

devinrhode2 commented 4 years ago

Discussion+example of using RHF with MUI https://spectrum.chat/react-hook-form/general/best-practice-with-material-ui~fe73bd36-88de-4dcc-ade7-256dc246a9ad