mui-rhf-library v1.5.6

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-cnmtmxtjgl.chromatic.com/

Usage

Here is a quick example to get you started:

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:

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 * 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',
            control: control,
            props: { fullWidth: true }, // Props of the field
            gridProps: {xs: 12} // Props of the Grid: "xs" | "sm" | "md" | "ld" | "xl"
        }
    ];

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

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

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

Documentation

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.