mui-rhf-library

Installation

mui-rhf-library is available as an npm package.

``sh
// with npm
npm install mui-rhf-library

// with yarn
yarn add mui-rhf-library
`

Migration from v2 to v3

Version 3.0.0 includes breaking changes due to the upgrade to MUI v7.

$3

1. Update MUI dependencies in your project:

`json
{
"@mui/material": "^7.3.2",
"@mui/system": "^7.3.2",
"@mui/x-date-pickers": "^8.11.3"
}
`

2. Update Grid props if using custom gridProps:

`javascript
// Before (v2)
gridProps: { xs: 12, sm: 6 }

// After (v3)
gridProps: { size: { xs: 12, sm: 6 } }
`

3. For temporary backward compatibility:

`jsx
fields={fields}
control={control}
shouldUseDeprecatedGrid={true} // Use old Grid API
/>
`

Demo

Check the storybook of the library: https://6256bd53e0b94a003aad40bd-crkdhbpfeg.chromatic.com/

Usage

Here is a quick example to get you started:

$3

`jsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { TextFieldController, SelectController } from 'mui-rhf-library';
import { useForm } from 'react-hook-form';

function App() {
const { control } = useForm();

return (
<>


name="select"
label="Select Controller"
control={control}
options={[
{ label: 'Option One', value: 'option-one', example: { name: 'example-one' } },
{ label: 'Option Two', value: 'option-two', example: { name: 'example-two' } }
]}
optionValue="example.name"
optionLabel="example.name"
variant="outlined"
/>

);
}

const container = document.querySelector('#app');
const root = createRoot(container);
root.render();
`

$3

You can generate form fields using the FormFields component.

By default, the component renders form fields using the new Grid component (MUI v7). If you need to use the legacy Grid API for backward compatibility, set the shouldUseDeprecatedGrid prop to true.

`jsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { FormFields } from 'mui-rhf-library';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import Grid from '@mui/material/Grid';
import * as yup from 'yup';

function App() {
const {
handleSubmit
control,
} = useForm();

const fields = [
{
fieldType: 'textField', // 'textField' | 'select' | 'autocomplete' | 'checkbox' | 'radioGroup' | 'switch' | 'datePicker' |'custom'
name: 'firstName',
label: 'firstName',
props: { fullWidth: true }, // Props of the field
gridProps: { size: { xs: 12, sm: 6 } } // Props of the Grid (Container of the input field)
}
];

const handleFormSubmit = (data) => {
console.log({ data });
};

return (


const container = document.querySelector('#app');
const root = createRoot(container);
root.render();
`

Documentation

$3

#### Form Fields

| Prop | Type | Default | Definition |
| ----------------------- | --------- | ------- | ------------------------------------------------------------------------------ |
| fields | Field[] | | The fields to be generated |
| control | Control | | The React Hook Form object to register components into React Hook Form. |
| shouldUseDeprecatedGrid | boolean | false | Use GridLegacy (MUI v6 and earlier Grid API) instead of the new Grid (MUI v7). |

Field[]: Array of fields to be generated, where each field is an object with the following properties:

- name: The name of the field.
- label: The label of the field.
- fieldType: The type of the field (textField, select, autocomplete, checkbox, radioGroup, switch, datePicker, or custom).
- gridProps: Props of the Grid (Container of the input field), for the available props, please check Grid2 or Grid (if you want to use deprecated Grid).
- props: Props of the field, for the available props, checkout related documentation depends on the fieldType.
- hidden: If the field should be hidden.

$3

#### TextField Controller

Props of Material UI TextField are also available.

| Prop | Type | Default | Definition |
| ------------ | ------------------------------ | ------- | ------------------------------------------------------------------------------------------------------- |
| name\* | string | | The name of the input |
| control\* | Control | | The React Hook Form object to register components into React Hook Form. |
| defaultValue | any | | The default value of the input that would be injected into React Hook Form Controller and the component |
| type | React.HTMLInputTypeAttribute | text | The type attribute in an HTML input. |

#### Select Controller

Props of Material UI Select are also available.

| Prop | Type | Default | Definition |
| ----------------- | ------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------- |
| name\* | string | | The name of the input |
| control\* | Control | | The React Hook Form object to register components into React Hook Form. |
| defaultValue | any | | The default value of the input that would be injected into React Hook Form Controller and the component |
| options | {disabled?: boolean, [key:string]: any}[] | | The option items that is available to the component. |
| optionValue | string | 'value' | Set property of options's value |
| optionLabel | string | 'label' | Set property of items’s text label |
| loading | boolean | false | Displays linear progress bar |
| customOptionLabel | (option: any) => any | | Display custom option label |
| helperText | ReactNode | | Form helper text |

#### Autocomplete Controller

Props of Material UI Autocomplete are also available.

| Prop | Type | Default | Definition |
| ----------------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------- |
| name\* | string | | The name of the input |
| control\* | Control | | The React Hook Form object to register components into React Hook Form. |
| defaultValue\* | any | | The default value of the input that would be injected into React Hook Form Controller and the component |
| options\* | {}[] | | The option items that is available to the component. |
| optionValue | string | 'value' | Set property of options's value |
| optionLabel | string | 'label' | Set property of items’s text label |
| textFieldProps | TextFieldProps | | The props that will be passed to TextField component in the renderInput of AutoComplete. |
| customOptionLabel | (option: any) => any | | Display custom option label |

#### RadioGroup Controller

| Prop | Type | Default | Definition |
| -------------- | ---------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------- |
| name\* | string | | The name of the input |
| label | string | | The label content |
| control\* | Control | | The React Hook Form object to register components into React Hook Form. |
| defaultValue\* | string \| number | | The default value of the input that would be injected into React Hook Form Controller and the component |
| options\* | Options | | The option items that is available to the component. |
| onChange | (event: React.ChangeEvent) => void | | A custom method that gets triggered when the value of the input is changed |
| helperText | ReactNode | | Form helper text |
| onBlur | (event: React.FocusEvent) => void; | | A custom method that gets triggered on blur of the input |

#### Checkbox Controller

| Prop | Type | Default | Definition |
| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------- |
| name\* | string | | The name of the input |
| label\* | string | | The label content |
| control\* | Control | | The React Hook Form object to register components into React Hook Form. |
| defaultValue | boolean | | The default value of the input that would be injected into React Hook Form Controller and the component |
| helperText | ReactNode | | Form helper text |
| onBlur | (event: React.FocusEvent) => void; | | A custom method that gets triggered on blur of the input |

#### Switch Controller

| Prop | Type | Default | Definition |
| ---------- | -------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------- |
| name\* | string | | The name of the input |
| label\* | string | | The label content |
| control\* | Control | | The React Hook Form object to register components into React Hook Form. |
| onChange | (event: React.ChangeEvent, value: string) => void; | | A custom method that gets triggered when the value of the switch is changed |
| helperText | ReactNode | | Form helper text |
| onBlur | (event: React.FocusEvent) => void; | | A custom method that gets triggered on blur of the input |

#### DatePicker Controller

| Prop | Type | Default | Definition |
| ------------ | ---------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------- |
| name\* | string | | The name of the input |
| label\* | string | | The label content |
| control\* | Control | | The React Hook Form object to register components into React Hook Form. |
| defaultValue | | | The default value of the input that would be injected into React Hook Form Controller and the component |
| onChange | ((value: any, context: PickerChangeHandlerContext) => void) | | A custom method that gets triggered when the value changes |
| helperText | ReactNode | | Form helper text |

#### Custom Controller

| Prop | Type | Default | Definition |
| --------------- | ------------- | ------- | ----------------------------------------------------------------------- |
| name\* | string | | The name of the input |
| control\* | Control | | The React Hook Form object to register components into React Hook Form. |
| CustomComponent | React.FC | | A custom component that will be rendered. |

#### FormFields

| Prop | Type | Default | Definition |
| --------- | --------------------- | --------- | ----------------------------------------------------------------------- |
| fields\* | array of FieldProps | | The name of the input |
| control\* | | Control` | The React Hook Form object to register components into React Hook Form. |

Changelog

Please read the changelog for details of what has changed.