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

$3

``console


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.

`console


npm install @mui/x-date-pickers @mui/icons-material

yarn add @mui/x-date-pickers @mui/icons-material

`

$3

From versions >= 3.x of this package MUI v5 is in use. Versions of 1 & 2 using Material-UI v4

$3

`tsx
import {FormContainer, TextFieldElement} from 'react-hook-form-mui'

function Form() {
return (
defaultValues={{name: ''}}
onSuccess={data => console.log(data)}
>


)
}
`

You can have a look at the example folder which sets up NextJS with react-hook-form-mui

$3

The 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.

$3

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):

* DateFns
* Dayjs

$3

#### 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.

`tsx
import {useWatch} from 'react-hook-form-mui' // instead of react-hook-form

const MySubmit = () => {
const value = useWatch('fieldName')
return (
Submit
)
}
`

$3

This project uses tsup to wrap the package for npm`.