MUI RHF Integration


This is a lightweight integration library for MUI and
React Hook Form with the two goals of being strictly typed with proper generic
definitions as well as being as unopinionated about the usage as possible.

Quick start

$3

``shell
npm i mui-rhf-integration
`

You'll need to have the following peer dependencies installed:

- react@^18
- @mui/material@^6.0.0
- react-hook-form@^7.29.0

Note that in order to use the RhfDatePicker, RhfDateTimePicker and RhfTimePicker components you need to also
install the @mui/x-date-pickers package.

> Note: As having the date and time pickers exported together with all other input types breaks some bundlers like
> Vite when the optional dependency is not installed, these pickers have to be imported from
> mui-rhf-integration/date-picker specifically.

$3

`typescript jsx
import {useForm} from 'react-hook-form';
import {RhfTextField} from 'mui-rhf-integration';
import {Button} from '@mui/material';
import {ReactNode} from "react";

type FieldValues = {
title: string;
};

const MyForm = (): ReactNode => {
const form = useForm();

return (
onSubmit={form.handleSubmit(() => {
// No-op
})}
>

Submit

);
};
`

> In contrast to some other integration libraries, you'll notice that you have to pass in the form control to the input
> element. This is preferred over utilizing a form context, as it allows Typescript to immediately verify the name
> passed in to match up with the properties in the FieldValues type.

Input elements

All input elements exported by this library take a control and name property to link up with the form. They
additionally accept various properties which are passed through to the wrapped components.

Where applicable, the wrapper components take care of error handling and displaying error messages as helper text
components below the input elements.

$3

Wrapper around the TextField component. Passes all known TextFieldProps properties down. Allowed value types are
string, null and undefined.

`typescript jsx
control={form.control}
name="title"
label="Title"
helperText="Title of the thing"
/>
`

The RhfTextField additional implements the Material Design recommendation for character counters. To enable them,
pass maxCharacters as property. You should additionally enable maxLength on the inputProps.

$3

Wrapper around the Checkbox component. Passes all known CheckboxProps properties down. Allowed value types are
bool, null and undefined.

`typescript jsx
control={form.control}
name="enabled"
/>
`

In order to display the checkbox with a label, you can utilize the MUI FormControlLabel component:

`typescript jsx
control={}
label="Enabled"
/>
`

$3

Wrapper around the Switch component. Passes all known SwitchProps properties down. Allowed value types are
bool, null and undefined.

`typescript jsx
control={form.control}
name="enabled"
/>
`

In order to display the switch with a label, you can utilize the MUI FormControlLabel component:

`typescript jsx
control={}
label="Enabled"
/>
`

$3

Element which handles multiple checkboxes according to the MUI documentation. The resulting value in the form values is
represented as an array of strings.

Options are defined as an array of objects with a value and label property.

`typescript jsx
control={form.control}
name="colors"
label="Colors"
options={[
{value: 'red', label: 'Red'},
{value: 'green', label: 'Green'},
{value: 'blue', label: 'Blue'},
]}
/>
`

You can influence the generated sub components via the root properties as well as the formLabelProps and
formGroupProps properties.

$3

Element which handles multiple radios according to the MUI documentation. The resulting value in the form values is
represented as a string.

Options are defined as an array of objects with a value and label property.

`typescript jsx
control={form.control}
name="color"
label="Color"
options={[
{value: 'red', label: 'Red'},
{value: 'green', label: 'Green'},
{value: 'blue', label: 'Blue'},
]}
/>
`

You can influence the generated sub components via the root properties as well as the formLabelProps and
formGroupProps properties.

$3

Wrapper around the Autocomplete component. Passes all known AutocompleteProps properties down. Allowed value types
are null, undefined and the value type defined by the autocomplete options.

`typescript jsx
control={form.control}
name="city"
textFieldProps={{
label: 'City',
}}
options={[
{value: 'berlin', label: 'Berlin'},
{value: 'new_york', label: 'New York'},
{value: 'syndey', label: 'Sydney'},
]}
/>
`

Additionally, it accepts the two properties valueToOption and optionToValue, which are used when you need to map
e.g. objects to IDs and vice versa for your form values.

$3

Wrapper around the DatePicker component. Passes all known DatePickerProps properties down.

`typescript jsx
control={form.control}
name="date"
label="Date"
/>
`

$3

Wrapper around the DateTimePicker component. Passes all known DateTimePickerProps properties down.

`typescript jsx
control={form.control}
name="dateTime"
label="Date time"
/>
`

$3

Wrapper around the TimePicker component. Passes all known TimePickerProps properties down.

`typescript jsx
control={form.control}
name="time"
label="Time"
/>
``