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.
npm install react-hook-form react-hook-form-mui
The dependency of react-hook-form
is a peerDependency so don't forget to install it as well.
From versions >= 3.x of this package MUI v5 is in use. Versions of 1 & 2 using Material-UI v4
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
The <FormContainer />
wires up a form and you can create sub-components which either make use
of useFormContext() | useWatch()
to react to form values.
Check out Storybook: Demo
You will find examples and use cases.
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):
This project uses microbundle
to wrap the package for npm
.