Closed chrissantamaria closed 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!
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.
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.
@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!
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.
hey @chrisparton1991 thanks for your great suggestion.
Hey Bill, you got the wrong Chris again π
omg, you always pop up as the first one... sorry...
No problem at all π
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!
@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
@chrissantamaria yea, you can reach me via email, twitter and spectrum message :)
I am pretty confident you can do most of the MUI components with a wrapper + Controller
Would it be better to use a Controller rather than just a ref?
Yes controller is better
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?
hey chris controller will isolate the re-render at the component level, so your form and app is not getting re-rendered.
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 π
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?
Discussion+example of using RHF with MUI https://spectrum.chat/react-hook-form/general/best-practice-with-material-ui~fe73bd36-88de-4dcc-ade7-256dc246a9ad
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
oruseFormContext
. 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