# mui-react-hook-form-plus

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

Latest version **1.5.1** (published 2023-05-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install mui-react-hook-form-plus
pnpm add mui-react-hook-form-plus
yarn add mui-react-hook-form-plus
bun add mui-react-hook-form-plus
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.1 |
| Published | 2023-05-28 |
| First published | 2022-09-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 488.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 68 |
| Author | Adiat Hasan |
| Maintainers | adiathasan |
| Keywords | react, react-hooks, react-hook-form, mui, typescript, forms, form-validation |

## Links

- npm: https://www.npmjs.com/package/mui-react-hook-form-plus
- Repository: https://github.com/adiathasan/mui-react-hook-form-plus
- Homepage: https://mui-react-hook-form-plus.vercel.app/?path=/docs/
- Issues: https://github.com/adiathasan/mui-react-hook-form-plus/issues
- npm.io page: https://npm.io/package/mui-react-hook-form-plus

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.5.1 (latest) — 2023-05-28
- 1.5.0 — 2023-05-26
- 1.4.0 — 2023-05-22
- 1.3.6 — 2023-04-10
- 1.3.5 — 2023-04-10
- 1.3.4 — 2023-03-24
- 1.3.3 — 2023-03-22
- 1.3.2 — 2022-11-05
- 1.3.1 — 2022-11-05
- 1.3.0 — 2022-10-16
- 1.2.0 — 2022-10-13
- 1.1.6 — 2022-10-11
- 1.1.5 — 2022-10-11
- 1.1.3 — 2022-10-10
- 1.1.2 — 2022-10-10
- … 24 more at https://npm.io/package/mui-react-hook-form-plus/versions

## README

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

[![npm version](https://badge.fury.io/js/mui-react-hook-form-plus.svg)](https://badge.fury.io/js/mui-react-hook-form-plus)

[![What You Can Build](https://raw.githubusercontent.com/adiathasan/mui-react-hook-form-plus/master/banner.webp)](https://raw.githubusercontent.com/adiathasan/mui-react-hook-form-plus/master/banner.webp)

[Trying It Out](https://www.npmjs.com/package/mui-react-hook-form-plus)

[Click here](https://mui-react-hook-form-plus.vercel.app/?path=/docs/) to see a live example!

Before Installing we need to install [material-ui](https://mui.com/material-ui/getting-started/installation/) & [react-hook-form](https://react-hook-form.com/get-started)

For date pickers

```source-shell
npm install @mui/x-date-pickers
---- or ----
yarn add @mui/x-date-pickers
```

#### Then [Install](https://www.npmjs.com/package/mui-react-hook-form-plus#install)

```source-shell
npm install mui-react-hook-form-plus
---- or ----
yarn 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:

```tsx
import { HookTextField, HookRating, useHookForm } from 'mui-react-hook-form-plus ';

const Component = () => {
	const defaultValues = { name: 'Adiat Hasan', rating: 4 };

	const { registerState, handleSubmit } = useHookForm({
		defaultValues,
	});

	const onSubmit = (data: typeof defaultValues) => {
		// will run if it is valid
	};

	return (
		<form onSubmit={handleSubmit(onSubmit)}>
			<HookTextField {...registerState('name')} />
			<HookRating {...registerState('rating')} />
			<button type='submit'>Submit</button>
		</form>
	);
};
```

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

[![What You Can Build](https://raw.githubusercontent.com/adiathasan/mui-react-hook-form-plus/master/mui-react-hook-form-plus.webp)](https://raw.githubusercontent.com/adiathasan/mui-react-hook-form-plus/master/mui-react-hook-form-plus.webp)

> ## Validation

Add `rules` prop to your `[InputComponents]`

```tsx
import { HookTextField, useHookForm } from 'mui-react-hook-form-plus ';

const Component = () => {
	const defaultValues = { name: '', isAdmin: true };

	const { registerState, handleSubmit } = useHookForm({
		defaultValues,
	});

	const onSubmit = (data: typeof defaultValues) => {
		// will run if it is validated | if !valid will thrown error in the UI
	};

	return (
		<form onSubmit={handleSubmit(onSubmit)}>
			<HookTextField
				{...registerState('name')}
				rules={{
					required: {
						value: true,
						message: 'A required field',
					},
					// maxLength
					// minLength
					// pattern
					// validate -> Fn -> reutrn -> srting | undefined
				}}
			/>
			<button type='submit'>Submit</button>
		</form>
	);
};
```

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](https://react-hook-form.com/api/useform/register#rules)

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

Just use the `register` method not the `registerState`

```tsx
import { HookTextField, useHookForm } from 'mui-react-hook-form-plus ';

const Component = () => {
	const defaultValues = { name: 'Adiat Hasan', rating: 4 };

	const { registerState, handleSubmit, register } = useHookForm({
		defaultValues,
	});

	const onSubmit = (data: typeof defaultValues) => {
		// -> do something with the data
	};

	return (
		<form onSubmit={handleSubmit(onSubmit)}>
			<input {...register('rating')} />
			<HookTextField {...registerState('name')} />
			<button type='submit'>Submit</button>
		</form>
	);
};
```

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](https://mui-react-hook-form-plus.vercel.app/?path=/docs/form-context--hookformprovider)

```tsx
import { HookTextField, useHookForm, HookFormProvider } from 'mui-react-hook-form-plus ';

const Component = () => {
	const defaultValues = { firstName: '', lastName: '', sex: '', rating: 3.5 };

	const methods = useHookForm<Person>({
		defaultValues,
	});

	const { registerState, handleSubmit } = methods;

	const onSubmit = (data: Person) => {
		// do something
	};

	return (
		<HookFormProvider {...methods}>
			<form onSubmit={handleSubmit(onSubmit)}>
				<HookTextField {...registerState('firstName')} textFieldProps={{ label: 'First Name' }} />
				<HookTextField {...registerState('lastName')} textFieldProps={{ label: 'Last Name' }} />
				<NestedComponent />
				<button type='submit'>Submit</button>
			</form>
		</HookFormProvider>
	);
};
```

Now we can get the `registerState` without prop drilling

```tsx
import { HookRating, useHookForm } from 'mui-react-hook-form-plus ';

const NestedComponent = () => {
	const { registerState } = useHookFormContext<Person>();

	return <HookRating {...registerState('rating')} ratingProps={{ precision: 0.5 }} />;
};
```

**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](https://react-hook-form.com/advanced-usage#FormProviderPerformance)

> ## 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/>`

```tsx
import { Button, Grid } from '@mui/material';
import { HookTextField, HookRating, useHookForm } from 'mui-react-hook-form-plus ';

const Component = () => {
	const defaultValues = { name: '', rating: 4 };

	const { registerState, handleSubmit } = useHookForm({
		defaultValues,
	});

	const onSubmit = (data: typeof defaultValues) => {
		// will run if it is valid
	};

	return (
		<form onSubmit={handleSubmit(onSubmit)}>
			<Grid container spacing={3}>
				<HookTextField
					{...registerState('name')}
					gridProps={{
						xs: 12,
						md: 5,
					}}
				/>
				<HookRating
					{...registerState('rating')}
					gridProps={{
						xs: 12,
						md: 5,
					}}
				/>
				<Grid>
					<Button type='submit' variant='contained'>
						Submit
					</Button>
				</Grid>
			</Grid>
		</form>
	);
};
```

> ## 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:

```bash
// Install component (community version)
yarn add @mui/x-date-pickers

// Install date library (if not already installed)
yarn add date-fns
```

```tsx
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { HookDatePicker } from 'mui-react-hook-form-plus ';

const Component = () => {
	return (
		<LocalizationProvider dateAdapter={AdapterDateFns}>
			<form onSubmit={handleSubmit(onSubmit)}>
				<HookDatePicker {...registerState('trialEndsAt')} />
			</form>
		</LocalizationProvider>
	);
};
```

> ## 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](https://mui-react-hook-form-plus.vercel.app/?path=/docs/hooktextfield--hooktextfield)

> ## DatePicker

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

Check out [DatePicker Demo](https://mui-react-hook-form-plus.vercel.app/?path=/docs/datepicker-📅--hookdatepicker)

> ## DateTimePicker

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

Check out [DateTimePicker Demo](https://mui-react-hook-form-plus.vercel.app/?path=/docs/datetimepicker--hookdatetimepicker)

> ## TimePicker

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

Check out [TimePicker Demo](https://mui-react-hook-form-plus.vercel.app/?path=/docs/timepicker-🕗--hooktimepicker)

> ## 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](https://mui-react-hook-form-plus.vercel.app/?path=/docs/mui-hooks-↩--summary)

## [See examples](https://mui-react-hook-form-plus.vercel.app/?path=/docs/)

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

---
_Source: https://npm.io/package/mui-react-hook-form-plus · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._