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
• DateTimePickerElement
• 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

From version >= 6 x-date-pickers version 6 is in use. Make sure you upgrade your dependencies.

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

• DateFns
• Dayjs

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.