mui-rhf-library v2.0.0

Installation

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

// with npm
npm install mui-rhf-library

// with yarn
yarn add mui-rhf-library

Demo

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

Usage

Here is a quick example to get you started:

Controllers

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 (
        <>
            <TextFieldController control={control} name="name" defaultValue="" label="TextField Controller" />

            <SelectController
                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(<App />);

Generate form fields

You can generate form fields using the FormFields component.

By default, the component renders form fields using Grid2, but if you decide to use Grid instead, set the shouldUseDeprecatedGrid prop to true.

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 { Grid2 } from '@mui/material';
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: 6 } } // Props of the Grid (Container of the input field)
        }
    ];

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

    return (
        <form onSubmit={handleSubmit(handleFormSubmit)}>
            <Grid2>
                <FormFields fields={fields} control={control} />
            </Grid2>
            <button type="submit">Submit</button>
        </form>
    );
}

const container = document.querySelector('#app');
const root = createRoot(container);
root.render(<App />);

Documentation

Form Generation

Form Fields

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.

Controllers

TextField Controller

Props of Material UI TextField are also available.

Select Controller

Props of Material UI Select are also available.

Autocomplete Controller

Props of Material UI Autocomplete are also available.

RadioGroup Controller

Checkbox Controller

Switch Controller

DatePicker Controller

Custom Controller

FormFields

Changelog

Please read the changelog for details of what has changed.