The perfect recipe with material-ui💙TS💙react-hook-form & more...

The complete type-safe material-ui and react-hook-form combo and beyond with simple api.

Highly Customizable and supports 99% use-cases

Trying It Out

Click here to see a live example!

Before Installing we need to install material-ui & react-hook-form

For date pickers

1npm install @mui/x-date-pickers
2---- or ----
3yarn add @mui/x-date-pickers

Then Install

1npm install mui-react-hook-form-plus
2---- or ----
3yarn add mui-react-hook-form-plus

If you are familiar with react-hook-form you will love it! Otherwise, you will also love it 😻

We use propGetter pattern just like react-hook-form is doing by registering the state of each field.

How to use it

1. Import Components and Hooks form mui-react-hook-form-plus.
2. From useHookForm get the registerState method.
3. Call the registerState method with name as argument that you want to register the field to with spread operator.

For more clear-cut answer follow the example below:

1import { HookTextField, HookRating, useHookForm } from 'mui-react-hook-form-plus ';
2
3const Component = () => {
4	const defaultValues = { name: 'Adiat Hasan', rating: 4 };
5
6	const { registerState, handleSubmit } = useHookForm({
7		defaultValues,
8	});
9
10	const onSubmit = (data: typeof defaultValues) => {
11		// will run if it is valid
12	};
13
14	return (
15		<form onSubmit={handleSubmit(onSubmit)}>
16			<HookTextField {...registerState('name')} />
17			<HookRating {...registerState('rating')} />
18			<button type='submit'>Submit</button>
19		</form>
20	);
21};

We have awesome typescript support so that you can take the most of it. Also, validation is a piece of 🧁(cake)

Validation

Add rules prop to your [InputComponents]

1import { HookTextField, useHookForm } from 'mui-react-hook-form-plus ';
2
3const Component = () => {
4	const defaultValues = { name: '', isAdmin: true };
5
6	const { registerState, handleSubmit } = useHookForm({
7		defaultValues,
8	});
9
10	const onSubmit = (data: typeof defaultValues) => {
11		// will run if it is validated | if !valid will thrown error in the UI
12	};
13
14	return (
15		<form onSubmit={handleSubmit(onSubmit)}>
16			<HookTextField
17				{...registerState('name')}
18				rules={{
19					required: {
20						value: true,
21						message: 'A required field',
22					},
23					// maxLength
24					// minLength
25					// pattern
26					// validate -> Fn -> reutrn -> srting | undefined
27				}}
28			/>
29			<button type='submit'>Submit</button>
30		</form>
31	);
32};

It will validate based on validation rules we specify.

The onSubmit Fn will be triggered if all input === valid

For more options for rules look into this

Now what if we want our vanilla <input />?

Just use the register method not the registerState

1import { HookTextField, useHookForm } from 'mui-react-hook-form-plus ';
2
3const Component = () => {
4	const defaultValues = { name: 'Adiat Hasan', rating: 4 };
5
6	const { registerState, handleSubmit, register } = useHookForm({
7		defaultValues,
8	});
9
10	const onSubmit = (data: typeof defaultValues) => {
11		// -> do something with the data
12	};
13
14	return (
15		<form onSubmit={handleSubmit(onSubmit)}>
16			<input {...register('rating')} />
17			<HookTextField {...registerState('name')} />
18			<button type='submit'>Submit</button>
19		</form>
20	);
21};

You might be wondering what about deep nested complex Component?

Use the FormContext to make it simple.

1. Wrap your form with HookFormProvider
2. Pass the methods returned from useHookForm to HookFormProvider
3. Get the registerState method anywhere in the tree from useHookFormContext

Example for Nested Component

1import { HookTextField, useHookForm, HookFormProvider } from 'mui-react-hook-form-plus ';
2
3const Component = () => {
4	const defaultValues = { firstName: '', lastName: '', sex: '', rating: 3.5 };
5
6	const methods = useHookForm<Person>({
7		defaultValues,
8	});
9
10	const { registerState, handleSubmit } = methods;
11
12	const onSubmit = (data: Person) => {
13		// do something
14	};
15
16	return (
17		<HookFormProvider {...methods}>
18			<form onSubmit={handleSubmit(onSubmit)}>
19				<HookTextField {...registerState('firstName')} textFieldProps={{ label: 'First Name' }} />
20				<HookTextField {...registerState('lastName')} textFieldProps={{ label: 'Last Name' }} />
21				<NestedComponent />
22				<button type='submit'>Submit</button>
23			</form>
24		</HookFormProvider>
25	);
26};

Now we can get the registerState without prop drilling

1import { HookRating, useHookForm } from 'mui-react-hook-form-plus ';
2
3const NestedComponent = () => {
4	const { registerState } = useHookFormContext<Person>();
5
6	return <HookRating {...registerState('rating')} ratingProps={{ precision: 0.5 }} />;
7};

Note that using FormContext can lack in performance as it is built on top of React.Context.

To optimize it further and for learning more check out this

Layouts [ Form + Grid ]

We baked in <Grid/> directly into the [InputComponents] so that it enhances the DX.

A gridProps is what you need to lay out the [InputComponents].

But don't forget to Wrap it inside a <Grid Container/>

1import { Button, Grid } from '@mui/material';
2import { HookTextField, HookRating, useHookForm } from 'mui-react-hook-form-plus ';
3
4const Component = () => {
5	const defaultValues = { name: '', rating: 4 };
6
7	const { registerState, handleSubmit } = useHookForm({
8		defaultValues,
9	});
10
11	const onSubmit = (data: typeof defaultValues) => {
12		// will run if it is valid
13	};
14
15	return (
16		<form onSubmit={handleSubmit(onSubmit)}>
17			<Grid container spacing={3}>
18				<HookTextField
19					{...registerState('name')}
20					gridProps={{
21						xs: 12,
22						md: 5,
23					}}
24				/>
25				<HookRating
26					{...registerState('rating')}
27					gridProps={{
28						xs: 12,
29						md: 5,
30					}}
31				/>
32				<Grid>
33					<Button type='submit' variant='contained'>
34						Submit
35					</Button>
36				</Grid>
37			</Grid>
38		</form>
39	);
40};

DatePicker

Package installation:

You need to install 3 different types of package to make the pickers work:

1. The component (@mui/x-date-pickers) manages the rendering.
2. The date-library (moment, dayjs, ...) manages the date manipulation.
3. The adapter (@date-io) exposes your favorite date-library under a unified api used by component. First you have to install the date-library you want to use to manage dates, and the component package:

1// Install component (community version)
2yarn add @mui/x-date-pickers
3
4// Install date library (if not already installed)
5yarn add date-fns

1import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
2import { HookDatePicker } from 'mui-react-hook-form-plus ';
3
4const Component = () => {
5	return (
6		<LocalizationProvider dateAdapter={AdapterDateFns}>
7			<form onSubmit={handleSubmit(onSubmit)}>
8				<HookDatePicker {...registerState('trialEndsAt')} />
9			</form>
10		</LocalizationProvider>
11	);
12};

Available Input Components

1. <HookToggleButtonGroup />
2. <HookAutoComplete />
3. <HookRadioButton />
4. <HookTextField />
5. <HookCheckBox />
6. <HookSelect />
7. <HookSwitch />
8. <HookRating />
9. <HookSlider />

Check out Inputs Demo

DatePicker

1. <HookDatePicker />
2. <HookStaticDatePicker />
3. <HookDesktopDatePicker />
4. <HookMobileDatePicker />

Check out DatePicker Demo

DateTimePicker

1. <HookDateTimePicker />
2. <HookStaticDateTimePicker />
3. <HookDesktopDateTimePicker />
4. <HookMobileDateTimePicker />

Check out DateTimePicker Demo

TimePicker

1. <HookTimePicker />
2. <HookStaticTimePicker />
3. <HookDesktopTimePicker />
4. <HookMobileTimePicker />

Check out TimePicker Demo

Form Hooks

1. useHookForm
2. useHookFormContext

Context Providers

1. HookFormProvider

Effortless Hooks

As we have promised with the project name with adding a -plus to mui-react-hook-form-plus.

We delivered it. A few effortless hooks to make your mui journey special.

We provided the same pattern as register and propGetters as the form components

Those Hooks are:

1. useMenu
2. usePagination
3. useAccordion
4. useTabs
5. useDialog
6. useBackdrop
7. useBottomNavigation

And more hooks are in lab 🧪 preparing to be released. So, stay tuned.

Check out Hooks Demo

See examples

https://mui-react-hook-form-plus.vercel.app/?path=/docs/

MORE IS COMING...

Open for contributions

Just follow the CONTRIBUTING.md & you are good to go.