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.

Simple form setup

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

Typesafe form setup

  function Form() {
    const {control, handleSubmit} = useForm({
      defaultValues: {
        name: '',
        auto: '',
        check: false
      },
    })
    const options = [
      {id: 'one', label: 'One'},
      {id: 'two', label: 'Two'},
      {id: 'three', label: 'Three'},
    ]
    return (
        <form onSubmit={handleSubmit((data) => console.log(data))} noValidate>
          <Stack spacing={2}>
            <TextFieldElement
              name={'name'}
              label={'Name'}
              control={control}
              required
              fullWidth
            />
            <AutocompleteElement
              name={'auto'}
              label={'Autocomplete'}
              control={control}
              options={options}
            />
            <CheckboxElement name={'check'} label={'Check'} control={control} />
            <Button type={'submit'} color={'primary'}>
              Submit
            </Button>
          </Stack>
        </form>
    )
  }

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.

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.

Support Maintanance

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