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
The components are written in TypeScript and attempt an easy integration.
How to use it
Installation
npm install react-hook-form react-hook-form-muiThe dependency of react-hook-form is a peerDependency so don't forget to install it as well.
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):
Bundle
This project uses microbundle to wrap the package for npm.