https://github.com/adiathasan/mui-react-hook-form-plus
The complete type-safe material-ui and react-hook-form combo and beyond with simple api.
https://github.com/adiathasan/mui-react-hook-form-plus
material-ui react react-hook-form react-hooks typescript
Last synced: 6 months ago
JSON representation
The complete type-safe material-ui and react-hook-form combo and beyond with simple api.
- Host: GitHub
- URL: https://github.com/adiathasan/mui-react-hook-form-plus
- Owner: adiathasan
- License: mit
- Created: 2022-09-18T04:10:02.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-05-28T17:51:03.000Z (almost 3 years ago)
- Last Synced: 2025-06-07T22:41:55.019Z (10 months ago)
- Topics: material-ui, react, react-hook-form, react-hooks, typescript
- Language: TypeScript
- Homepage: https://mui-react-hook-form-plus.vercel.app/?path=/docs/
- Size: 3.52 MB
- Stars: 69
- Watchers: 3
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
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
[](https://badge.fury.io/js/mui-react-hook-form-plus)
[](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 (
Submit
);
};
```
We have awesome `typescript` support so that you can take the most of it. Also, `validation` is a piece of 🧁(cake)
[](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 (
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](https://react-hook-form.com/api/useform/register#rules)
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`
### 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({
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](https://react-hook-form.com/advanced-usage#FormProviderPerformance)
> ## 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 (
Submit
);
};
```
> ## 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 (
);
};
```
> ## Available Input Components
1. ``
2. ``
3. ``
4. ``
5. ``
6. ``
7. ``
8. ``
9. ``
Check out [Inputs Demo](https://mui-react-hook-form-plus.vercel.app/?path=/docs/hooktextfield--hooktextfield)
> ## DatePicker
1. ``
2. ``
3. ``
4. ``
Check out [DatePicker Demo](https://mui-react-hook-form-plus.vercel.app/?path=/docs/datepicker-📅--hookdatepicker)
> ## DateTimePicker
1. ``
2. ``
3. ``
4. ``
Check out [DateTimePicker Demo](https://mui-react-hook-form-plus.vercel.app/?path=/docs/datetimepicker--hookdatetimepicker)
> ## TimePicker
1. ``
2. ``
3. ``
4. ``
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.