{"id":28484660,"url":"https://github.com/adiathasan/mui-react-hook-form-plus","last_synced_at":"2025-10-03T13:16:26.412Z","repository":{"id":59590802,"uuid":"537996592","full_name":"adiathasan/mui-react-hook-form-plus","owner":"adiathasan","description":"The complete type-safe material-ui and react-hook-form combo and beyond with simple api.","archived":false,"fork":false,"pushed_at":"2023-05-28T17:51:03.000Z","size":3691,"stargazers_count":69,"open_issues_count":3,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-07T22:41:55.019Z","etag":null,"topics":["material-ui","react","react-hook-form","react-hooks","typescript"],"latest_commit_sha":null,"homepage":"https://mui-react-hook-form-plus.vercel.app/?path=/docs/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adiathasan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-18T04:10:02.000Z","updated_at":"2025-02-02T20:56:01.000Z","dependencies_parsed_at":"2024-06-19T13:34:12.652Z","dependency_job_id":"e8c9cee4-fa43-47cf-8d62-5a0bfb47eb0a","html_url":"https://github.com/adiathasan/mui-react-hook-form-plus","commit_stats":{"total_commits":122,"total_committers":3,"mean_commits":"40.666666666666664","dds":"0.024590163934426257","last_synced_commit":"d8c8623dc2900d9924e1e1b92a51d5886f382140"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/adiathasan/mui-react-hook-form-plus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adiathasan%2Fmui-react-hook-form-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adiathasan%2Fmui-react-hook-form-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adiathasan%2Fmui-react-hook-form-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adiathasan%2Fmui-react-hook-form-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adiathasan","download_url":"https://codeload.github.com/adiathasan/mui-react-hook-form-plus/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adiathasan%2Fmui-react-hook-form-plus/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262593619,"owners_count":23334028,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["material-ui","react","react-hook-form","react-hooks","typescript"],"created_at":"2025-06-07T22:35:28.798Z","updated_at":"2025-10-03T13:16:21.385Z","avatar_url":"https://github.com/adiathasan.png","language":"TypeScript","readme":"### The perfect recipe with `material-ui`💙`TS`💙`react-hook-form` \u0026 more...\n\nThe complete `type-safe` `material-ui` and `react-hook-form` combo and beyond with simple api.\n\nHighly `Customizable` and supports 99% use-cases\n\n[![npm version](https://badge.fury.io/js/mui-react-hook-form-plus.svg)](https://badge.fury.io/js/mui-react-hook-form-plus)\n\n[![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)\n\n[Trying It Out](https://www.npmjs.com/package/mui-react-hook-form-plus)\n\n[Click here](https://mui-react-hook-form-plus.vercel.app/?path=/docs/) to see a live example!\n\nBefore Installing we need to install [material-ui](https://mui.com/material-ui/getting-started/installation/) \u0026 [react-hook-form](https://react-hook-form.com/get-started)\n\nFor date pickers\n\n```source-shell\nnpm install @mui/x-date-pickers\n---- or ----\nyarn add @mui/x-date-pickers\n```\n\n#### Then [Install](https://www.npmjs.com/package/mui-react-hook-form-plus#install)\n\n```source-shell\nnpm install mui-react-hook-form-plus\n---- or ----\nyarn add mui-react-hook-form-plus\n```\n\nIf you are familiar with `react-hook-form` you will love it! Otherwise, you will also love it 😻\n\nWe use `propGetter` pattern just like `react-hook-form` is doing by `registering` the `state` of each field.\n\n## How to use it\n\n1. Import `Components` and `Hooks` form `mui-react-hook-form-plus`.\n2. From `useHookForm` get the `registerState` method.\n3. Call the `registerState` method with `name` as `argument` that you want to `register` the `field` to with `spread operator`.\n\nFor more clear-cut answer `follow` the example below:\n\n```tsx\nimport { HookTextField, HookRating, useHookForm } from 'mui-react-hook-form-plus ';\n\nconst Component = () =\u003e {\n\tconst defaultValues = { name: 'Adiat Hasan', rating: 4 };\n\n\tconst { registerState, handleSubmit } = useHookForm({\n\t\tdefaultValues,\n\t});\n\n\tconst onSubmit = (data: typeof defaultValues) =\u003e {\n\t\t// will run if it is valid\n\t};\n\n\treturn (\n\t\t\u003cform onSubmit={handleSubmit(onSubmit)}\u003e\n\t\t\t\u003cHookTextField {...registerState('name')} /\u003e\n\t\t\t\u003cHookRating {...registerState('rating')} /\u003e\n\t\t\t\u003cbutton type='submit'\u003eSubmit\u003c/button\u003e\n\t\t\u003c/form\u003e\n\t);\n};\n```\n\nWe have awesome `typescript` support so that you can take the most of it. Also, `validation` is a piece of 🧁(cake)\n\n[![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)\n\n\u003e ## Validation\n\nAdd `rules` prop to your `[InputComponents]`\n\n```tsx\nimport { HookTextField, useHookForm } from 'mui-react-hook-form-plus ';\n\nconst Component = () =\u003e {\n\tconst defaultValues = { name: '', isAdmin: true };\n\n\tconst { registerState, handleSubmit } = useHookForm({\n\t\tdefaultValues,\n\t});\n\n\tconst onSubmit = (data: typeof defaultValues) =\u003e {\n\t\t// will run if it is validated | if !valid will thrown error in the UI\n\t};\n\n\treturn (\n\t\t\u003cform onSubmit={handleSubmit(onSubmit)}\u003e\n\t\t\t\u003cHookTextField\n\t\t\t\t{...registerState('name')}\n\t\t\t\trules={{\n\t\t\t\t\trequired: {\n\t\t\t\t\t\tvalue: true,\n\t\t\t\t\t\tmessage: 'A required field',\n\t\t\t\t\t},\n\t\t\t\t\t// maxLength\n\t\t\t\t\t// minLength\n\t\t\t\t\t// pattern\n\t\t\t\t\t// validate -\u003e Fn -\u003e reutrn -\u003e srting | undefined\n\t\t\t\t}}\n\t\t\t/\u003e\n\t\t\t\u003cbutton type='submit'\u003eSubmit\u003c/button\u003e\n\t\t\u003c/form\u003e\n\t);\n};\n```\n\nIt will `validate` based on validation `rules` we specify.\n\nThe `onSubmit` `Fn` will be triggered if all `input === valid`\n\nFor more options for rules look into [this](https://react-hook-form.com/api/useform/register#rules)\n\nNow what if we want our `vanilla` `\u003cinput /\u003e`?\n\nJust use the `register` method not the `registerState`\n\n```tsx\nimport { HookTextField, useHookForm } from 'mui-react-hook-form-plus ';\n\nconst Component = () =\u003e {\n\tconst defaultValues = { name: 'Adiat Hasan', rating: 4 };\n\n\tconst { registerState, handleSubmit, register } = useHookForm({\n\t\tdefaultValues,\n\t});\n\n\tconst onSubmit = (data: typeof defaultValues) =\u003e {\n\t\t// -\u003e do something with the data\n\t};\n\n\treturn (\n\t\t\u003cform onSubmit={handleSubmit(onSubmit)}\u003e\n\t\t\t\u003cinput {...register('rating')} /\u003e\n\t\t\t\u003cHookTextField {...registerState('name')} /\u003e\n\t\t\t\u003cbutton type='submit'\u003eSubmit\u003c/button\u003e\n\t\t\u003c/form\u003e\n\t);\n};\n```\n\nYou might be wondering what about `deep nested` complex `Component`?\n\nUse the `FormContext` to make it simple.\n\n1. Wrap your form with `HookFormProvider`\n2. Pass the methods returned from `useHookForm` to `HookFormProvider`\n3. Get the `registerState` method anywhere in the `tree` from `useHookFormContext`\n\n### Example for [Nested Component](https://mui-react-hook-form-plus.vercel.app/?path=/docs/form-context--hookformprovider)\n\n```tsx\nimport { HookTextField, useHookForm, HookFormProvider } from 'mui-react-hook-form-plus ';\n\nconst Component = () =\u003e {\n\tconst defaultValues = { firstName: '', lastName: '', sex: '', rating: 3.5 };\n\n\tconst methods = useHookForm\u003cPerson\u003e({\n\t\tdefaultValues,\n\t});\n\n\tconst { registerState, handleSubmit } = methods;\n\n\tconst onSubmit = (data: Person) =\u003e {\n\t\t// do something\n\t};\n\n\treturn (\n\t\t\u003cHookFormProvider {...methods}\u003e\n\t\t\t\u003cform onSubmit={handleSubmit(onSubmit)}\u003e\n\t\t\t\t\u003cHookTextField {...registerState('firstName')} textFieldProps={{ label: 'First Name' }} /\u003e\n\t\t\t\t\u003cHookTextField {...registerState('lastName')} textFieldProps={{ label: 'Last Name' }} /\u003e\n\t\t\t\t\u003cNestedComponent /\u003e\n\t\t\t\t\u003cbutton type='submit'\u003eSubmit\u003c/button\u003e\n\t\t\t\u003c/form\u003e\n\t\t\u003c/HookFormProvider\u003e\n\t);\n};\n```\n\nNow we can get the `registerState` without prop drilling\n\n```tsx\nimport { HookRating, useHookForm } from 'mui-react-hook-form-plus ';\n\nconst NestedComponent = () =\u003e {\n\tconst { registerState } = useHookFormContext\u003cPerson\u003e();\n\n\treturn \u003cHookRating {...registerState('rating')} ratingProps={{ precision: 0.5 }} /\u003e;\n};\n```\n\n**Note** that using `FormContext` can lack in performance as it is built on top of `React.Context`.\n\nTo optimize it further and for learning more check out [this](https://react-hook-form.com/advanced-usage#FormProviderPerformance)\n\n\u003e ## Layouts [ Form + Grid ]\n\nWe baked in `\u003cGrid/\u003e` directly into the `[InputComponents]` so that it enhances the `DX`.\n\nA `gridProps` is what you need to lay out the `[InputComponents]`.\n\nBut don't forget to `Wrap` it inside a `\u003cGrid Container/\u003e`\n\n```tsx\nimport { Button, Grid } from '@mui/material';\nimport { HookTextField, HookRating, useHookForm } from 'mui-react-hook-form-plus ';\n\nconst Component = () =\u003e {\n\tconst defaultValues = { name: '', rating: 4 };\n\n\tconst { registerState, handleSubmit } = useHookForm({\n\t\tdefaultValues,\n\t});\n\n\tconst onSubmit = (data: typeof defaultValues) =\u003e {\n\t\t// will run if it is valid\n\t};\n\n\treturn (\n\t\t\u003cform onSubmit={handleSubmit(onSubmit)}\u003e\n\t\t\t\u003cGrid container spacing={3}\u003e\n\t\t\t\t\u003cHookTextField\n\t\t\t\t\t{...registerState('name')}\n\t\t\t\t\tgridProps={{\n\t\t\t\t\t\txs: 12,\n\t\t\t\t\t\tmd: 5,\n\t\t\t\t\t}}\n\t\t\t\t/\u003e\n\t\t\t\t\u003cHookRating\n\t\t\t\t\t{...registerState('rating')}\n\t\t\t\t\tgridProps={{\n\t\t\t\t\t\txs: 12,\n\t\t\t\t\t\tmd: 5,\n\t\t\t\t\t}}\n\t\t\t\t/\u003e\n\t\t\t\t\u003cGrid\u003e\n\t\t\t\t\t\u003cButton type='submit' variant='contained'\u003e\n\t\t\t\t\t\tSubmit\n\t\t\t\t\t\u003c/Button\u003e\n\t\t\t\t\u003c/Grid\u003e\n\t\t\t\u003c/Grid\u003e\n\t\t\u003c/form\u003e\n\t);\n};\n```\n\n\u003e ## DatePicker\n\n### Package installation:\n\nYou need to install 3 different types of package to make the pickers work:\n\n1. The component (@mui/x-date-pickers) manages the rendering.\n2. The date-library (moment, dayjs, ...) manages the date manipulation.\n3. The adapter (@date-io) exposes your favorite date-library under a unified api used by component.\n   First you have to install the date-library you want to use to manage dates, and the component package:\n\n```bash\n// Install component (community version)\nyarn add @mui/x-date-pickers\n\n// Install date library (if not already installed)\nyarn add date-fns\n```\n\n```tsx\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\nimport { HookDatePicker } from 'mui-react-hook-form-plus ';\n\nconst Component = () =\u003e {\n\treturn (\n\t\t\u003cLocalizationProvider dateAdapter={AdapterDateFns}\u003e\n\t\t\t\u003cform onSubmit={handleSubmit(onSubmit)}\u003e\n\t\t\t\t\u003cHookDatePicker {...registerState('trialEndsAt')} /\u003e\n\t\t\t\u003c/form\u003e\n\t\t\u003c/LocalizationProvider\u003e\n\t);\n};\n```\n\n\u003e ## Available Input Components\n\n1. `\u003cHookToggleButtonGroup /\u003e`\n2. `\u003cHookAutoComplete /\u003e`\n3. `\u003cHookRadioButton /\u003e`\n4. `\u003cHookTextField /\u003e`\n5. `\u003cHookCheckBox /\u003e`\n6. `\u003cHookSelect /\u003e`\n7. `\u003cHookSwitch /\u003e`\n8. `\u003cHookRating /\u003e`\n9. `\u003cHookSlider /\u003e`\n\nCheck out [Inputs Demo](https://mui-react-hook-form-plus.vercel.app/?path=/docs/hooktextfield--hooktextfield)\n\n\u003e ## DatePicker\n\n1.  `\u003cHookDatePicker /\u003e`\n2.  `\u003cHookStaticDatePicker /\u003e`\n3.  `\u003cHookDesktopDatePicker /\u003e`\n4.  `\u003cHookMobileDatePicker /\u003e`\n\nCheck out [DatePicker Demo](https://mui-react-hook-form-plus.vercel.app/?path=/docs/datepicker-📅--hookdatepicker)\n\n\u003e ## DateTimePicker\n\n1.  `\u003cHookDateTimePicker /\u003e`\n2.  `\u003cHookStaticDateTimePicker /\u003e`\n3.  `\u003cHookDesktopDateTimePicker /\u003e`\n4.  `\u003cHookMobileDateTimePicker /\u003e`\n\nCheck out [DateTimePicker Demo](https://mui-react-hook-form-plus.vercel.app/?path=/docs/datetimepicker--hookdatetimepicker)\n\n\u003e ## TimePicker\n\n1.  `\u003cHookTimePicker /\u003e`\n2.  `\u003cHookStaticTimePicker /\u003e`\n3.  `\u003cHookDesktopTimePicker /\u003e`\n4.  `\u003cHookMobileTimePicker /\u003e`\n\nCheck out [TimePicker Demo](https://mui-react-hook-form-plus.vercel.app/?path=/docs/timepicker-🕗--hooktimepicker)\n\n\u003e ## Form Hooks\n\n1. `useHookForm`\n2. `useHookFormContext`\n\n\u003e ## Context Providers\n\n1. `HookFormProvider`\n\n\u003e ## Effortless Hooks\n\nAs we have `promised` with the `project name` with adding a `-plus` to `mui-react-hook-form-plus`.\n\nWe delivered it. A few effortless hooks to make your `mui` journey `special`.\n\nWe provided the same `pattern` as `register` and `propGetters` as the `form` `components`\n\nThose Hooks are:\n\n1. `useMenu`\n2. `usePagination`\n3. `useAccordion`\n4. `useTabs`\n5. `useDialog`\n6. `useBackdrop`\n7. `useBottomNavigation`\n\nAnd more `hooks` are in lab 🧪 preparing to be released. So, stay tuned.\n\nCheck out [Hooks Demo](https://mui-react-hook-form-plus.vercel.app/?path=/docs/mui-hooks-↩--summary)\n\n## [See examples](https://mui-react-hook-form-plus.vercel.app/?path=/docs/)\n\n#### https://mui-react-hook-form-plus.vercel.app/?path=/docs/\n\n### MORE IS COMING...\n\n### Open for contributions\n\nJust follow the `CONTRIBUTING.md` \u0026 you are good to go.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadiathasan%2Fmui-react-hook-form-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadiathasan%2Fmui-react-hook-form-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadiathasan%2Fmui-react-hook-form-plus/lists"}