mui-rhf-library

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-rrlcysbvah.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 the new Grid component (MUI v7). If you need to use the legacy Grid API for backward compatibility, 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 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 (
        <form onSubmit={handleSubmit(handleFormSubmit)}>
            <Grid container spacing={2}>
                <FormFields fields={fields} control={control} />
            </Grid>
            <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.