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

1# npm install react-hook-form react-hook-form-mui
2# 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.

1#  npm install @mui/x-date-pickers @mui/icons-material
2#  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.

Simple form setup

1import {FormContainer, TextFieldElement} from 'react-hook-form-mui'
2
3function Form() {
4    return (
5        <FormContainer
6            defaultValues={{name: ''}}
7            onSuccess={data => console.log(data)}
8        >
9            <TextFieldElement name="name" label="Name" required/>
10        </FormContainer>
11    )
12}

Typesafe form setup

1  function Form() {
2    const {control, handleSubmit} = useForm({
3      defaultValues: {
4        name: '',
5        auto: '',
6        check: false
7      },
8    })
9    const options = [
10      {id: 'one', label: 'One'},
11      {id: 'two', label: 'Two'},
12      {id: 'three', label: 'Three'},
13    ]
14    return (
15        <form onSubmit={handleSubmit((data) => console.log(data))} noValidate>
16          <Stack spacing={2}>
17            <TextFieldElement
18              name={'name'}
19              label={'Name'}
20              control={control}
21              required
22              fullWidth
23            />
24            <AutocompleteElement
25              name={'auto'}
26              label={'Autocomplete'}
27              control={control}
28              options={options}
29            />
30            <CheckboxElement name={'check'} label={'Check'} control={control} />
31            <Button type={'submit'} color={'primary'}>
32              Submit
33            </Button>
34          </Stack>
35        </form>
36    )
37  }

You can have a look at all different possibilities to use forms at following code examples

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.

1import {useWatch} from 'react-hook-form-mui' // instead of react-hook-form
2
3const MySubmit = () => {
4    const value = useWatch('fieldName')
5    return (
6        <Button disabled={!value}>Submit</Button>
7    )
8}

Bundle

This project uses tsup to wrap the package for npm.

Support Maintanance

If you find this package useful consider a small contribution: Buy Me A Coffee

Contributing

Make sure you're running Node.js 20

1. Clone this repository

1git clone https://github.com/dohomi/react-hook-form-mui.git
2cd react-hook-form-mui

2. Install dependencies

1yarn

3. Build the project

1yarn build

4. Run the storybook

1yarn sb-start

Changes to storybook stories can be made in apps/storybook/stories. Changes to the library can be made in packages/rhf-mui.