react-hook-form-mui
v7.4.0
Published
<div align="center"> <a href="https://react-hook-form-material-ui.vercel.app/" rel="noopener" target="_blank"> <img src="./rhf-mui.png" alt="Material-UI and react-hook-form combined" /> </a> </div>
Downloads
116,299
Maintainers
Readme
Material-UI and react-hook-form combined
About this project
This project simplifies the use of react-hook-form
and Material-UI
. It provides opinionated use cases with following
components:
- FormContainer
- AutocompleteElement
- TextFieldElement
- SelectElement
- MultiSelectElement
- RadioButtonGroup
- CheckboxButtonGroup
- CheckboxElement
- SwitchElement
- PasswordElement
- DatePickerElement
- SliderElement
- ToggleButtonGroupElement
Please check out the demo for the element overview.
How to use it
Installation
# npm install react-hook-form react-hook-form-mui
# yarn add react-hook-form react-hook-form-mui
This package utilizes pickers and icons of the MUI ecosystem. If you make use of it add them to your app.
# npm install @mui/x-date-pickers @mui/icons-material
# yarn add @mui/x-date-pickers @mui/icons-material
Important
From versions >= 3.x of this package MUI v5 is in use. Versions of 1 & 2 using Material-UI v4
Your component code
import {FormContainer, TextFieldElement} from 'react-hook-form-mui'
function Form() {
return (
<FormContainer
defaultValues={{name: ''}}
onSuccess={data => console.log(data)}
>
<TextFieldElement name="name" label="Name" required/>
</FormContainer>
)
}
You can have a look at the example
folder which sets up NextJS with react-hook-form-mui
FormContainer creates formContext
The <FormContainer />
wires up a form and you can create sub-components which either make use
of useFormContext() | useWatch()
to react to form values.
Demo
Check out Storybook: Demo
You will find examples and use cases.
With Datepicker
If you are using the DatepickerElement
keep in mind that you have to wrap your form with a provider:
Examples for Dayjs or DateFns provider (used in the demo):
Troubleshooting
Issues if context is undefined (useWatch)
For convenient reasons this package is re-exporting react-hook-form
which is especially required if you have context
issues of React.
import {useWatch} from 'react-hook-form-mui' // instead of react-hook-form
const MySubmit = () => {
const value = useWatch('fieldName')
return (
<Button disabled={!value}>Submit</Button>
)
}
Bundle
This project uses tsup
to wrap the package for npm
.