mui-rhf-library

A set of configured Material UI form inputs configured with React Hook Form and Yup.

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.

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

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
onChange	(event: SelectChangeEvent) => void		Callback fired when a menu item is selected.
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
multiple	boolean		If true, menu will support multiple selections.
onChange	(event: SelectChangeEvent) => void		Callback fired when a menu item is selected.
disableClearable	boolean
textFieldProps	TextFieldProps		The props that will be passed to TextField component in the renderInput of AutoComplete.
loading	boolean	false	Displays linear progress bar
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

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.
onChange	(event: React.ChangeEvent) => void		A custom method that gets triggered when the value of the checkbox is changed
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

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.
defaultValue	boolean		The default value of the input that would be injected into React Hook Form Controller and the component
onChange	(event: React.ChangeEvent) => void		A custom method that gets triggered when the value of the switch is changed
helperText	ReactNode		Form helper text

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
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.