mui-react-hook-form-plus

$3

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

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

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





Submit

);
};


`

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)

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



{...registerState('name')}
rules={{
required: {
value: true,
message: 'A required field',
},
// maxLength
// minLength
// pattern
// validate -> Fn -> reutrn -> srting | undefined
}}
/>
Submit

);
};


`

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 ?

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 (





Submit

);
};


`

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

$3

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

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

const methods = useHookForm({
defaultValues,
});

const { registerState, handleSubmit } = methods;

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

return (







Submit


);
};


`

Now we can get the registerState without prop drilling

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

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

return ;
};
`

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

`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 (




{...registerState('name')}
gridProps={{
xs: 12,
md: 5,
}}
/>
{...registerState('rating')}
gridProps={{
xs: 12,
md: 5,
}}
/>


Submit




);
};


`

> ## DatePicker

$3

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 (







);
};


`

> ## Available Input Components

1.
2.
3.
4.
5.
6.
7.
8.
9.

Check out Inputs Demo

> ## DatePicker

1.
2.
3.
4.

Check out DatePicker Demo

> ## DateTimePicker

1.
2.
3.
4.

Check out DateTimePicker Demo

> ## TimePicker

1.
2.
3.
4.

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/

$3

$3

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