{"id":13515288,"url":"https://github.com/dohomi/react-hook-form-mui","last_synced_at":"2025-05-14T05:10:42.152Z","repository":{"id":37047942,"uuid":"263794049","full_name":"dohomi/react-hook-form-mui","owner":"dohomi","description":"Material-UI form components ready to use with react-hook-form","archived":false,"fork":false,"pushed_at":"2025-05-13T00:26:22.000Z","size":57567,"stargazers_count":606,"open_issues_count":34,"forks_count":120,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-13T01:28:10.712Z","etag":null,"topics":["material-ui","react","react-hook-form","typescript"],"latest_commit_sha":null,"homepage":"https://react-hook-form-material-ui.vercel.app","language":"JavaScript","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/dohomi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":["dohomi"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":"dohomi","custom":null}},"created_at":"2020-05-14T02:23:14.000Z","updated_at":"2025-05-13T00:26:26.000Z","dependencies_parsed_at":"2022-07-11T22:17:19.525Z","dependency_job_id":"15d310b2-d125-4ec5-8b3c-89896c487b6f","html_url":"https://github.com/dohomi/react-hook-form-mui","commit_stats":{"total_commits":230,"total_committers":17,"mean_commits":"13.529411764705882","dds":"0.22608695652173916","last_synced_commit":"d8cefc9cbef0f19178059039c15e6d19d95d203b"},"previous_names":[],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dohomi%2Freact-hook-form-mui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dohomi%2Freact-hook-form-mui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dohomi%2Freact-hook-form-mui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dohomi%2Freact-hook-form-mui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dohomi","download_url":"https://codeload.github.com/dohomi/react-hook-form-mui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253856575,"owners_count":21974573,"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","typescript"],"created_at":"2024-08-01T05:01:08.907Z","updated_at":"2025-05-14T05:10:42.124Z","avatar_url":"https://github.com/dohomi.png","language":"JavaScript","funding_links":["https://github.com/sponsors/dohomi","https://buymeacoffee.com/dohomi","https://www.buymeacoffee.com/dohomi"],"categories":["JavaScript"],"sub_categories":[],"readme":"# Material-UI and react-hook-form combined\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://react-hook-form-material-ui.vercel.app/\" rel=\"noopener\" target=\"_blank\"\u003e\n    \u003cimg src=\"./rhf-mui.png\" alt=\"Material-UI and react-hook-form combined\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n![GitHub](https://img.shields.io/github/license/dohomi/react-hook-form-mui)\n[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/dohomi/react-hook-form-mui.svg)](http://isitmaintained.com/project/dohomi/react-hook-form-mui 'Average time to resolve an issue')\n[![Percentage of issues still open](http://isitmaintained.com/badge/open/dohomi/react-hook-form-mui.svg)](http://isitmaintained.com/project/dohomi/react-hook-form-mui 'Percentage of issues still open')\n\n\u003c/div\u003e\n\n## About this project\n\nThis project simplifies the use of [`react-hook-form`](https://github.com/react-hook-form/react-hook-form)\nand [`Material-UI`](https://github.com/mui/material-ui). It provides opinionated use cases with following\ncomponents:\n\n* FormContainer\n* AutocompleteElement\n* TextFieldElement\n* SelectElement\n* MultiSelectElement\n* RadioButtonGroup\n* CheckboxButtonGroup\n* CheckboxElement\n* SwitchElement\n* PasswordElement\n* DatePickerElement\n* DateTimePickerElement\n* SliderElement\n* ToggleButtonGroupElement\n\nPlease check out the [demo](https://react-hook-form-material-ui.vercel.app/) for the element overview.\n\n## How to use it\n\n### Installation\n\n```console\n# npm install react-hook-form react-hook-form-mui\n# yarn add react-hook-form react-hook-form-mui\n```\n\nThis package utilizes pickers and icons of the MUI ecosystem. If you make use of it add them to your app.\n\n```console\n#  npm install @mui/x-date-pickers @mui/icons-material\n#  yarn add @mui/x-date-pickers @mui/icons-material\n```\n\n### Important\n\nFrom versions \u003e= 3.x of this package MUI v5 is in use. Versions of 1 \u0026 2 using Material-UI v4\n\nFrom version \u003e= 6 x-date-pickers version 6 is in use. Make sure you upgrade your dependencies.\n\n### Simple form setup\n\n```tsx\nimport {FormContainer, TextFieldElement} from 'react-hook-form-mui'\n\nfunction Form() {\n    return (\n        \u003cFormContainer\n            defaultValues={{name: ''}}\n            onSuccess={data =\u003e console.log(data)}\n        \u003e\n            \u003cTextFieldElement name=\"name\" label=\"Name\" required/\u003e\n        \u003c/FormContainer\u003e\n    )\n}\n```\n\n### Typesafe form setup\n\n```tsx\n  function Form() {\n    const {control, handleSubmit} = useForm({\n      defaultValues: {\n        name: '',\n        auto: '',\n        check: false\n      },\n    })\n    const options = [\n      {id: 'one', label: 'One'},\n      {id: 'two', label: 'Two'},\n      {id: 'three', label: 'Three'},\n    ]\n    return (\n        \u003cform onSubmit={handleSubmit((data) =\u003e console.log(data))} noValidate\u003e\n          \u003cStack spacing={2}\u003e\n            \u003cTextFieldElement\n              name={'name'}\n              label={'Name'}\n              control={control}\n              required\n              fullWidth\n            /\u003e\n            \u003cAutocompleteElement\n              name={'auto'}\n              label={'Autocomplete'}\n              control={control}\n              options={options}\n            /\u003e\n            \u003cCheckboxElement name={'check'} label={'Check'} control={control} /\u003e\n            \u003cButton type={'submit'} color={'primary'}\u003e\n              Submit\n            \u003c/Button\u003e\n          \u003c/Stack\u003e\n        \u003c/form\u003e\n    )\n  }\n```\n\nYou can have a look at all different possibilities to use forms at following [`code examples`](apps/storybook/stories/FormContainer.stories.tsx)\n\n### FormContainer creates `formContext`\n\nThe `\u003cFormContainer /\u003e` wires up a form and you can create sub-components which either make use\nof `useFormContext() | useWatch()` to react to form values.\n\n## Demo\n\nCheck out Storybook: [Demo](https://react-hook-form-material-ui.vercel.app)\n\nYou will find examples and use cases.\n\n### With Datepicker\n\nIf you are using the `DatepickerElement` keep in mind that you have to wrap your form with a provider:\n\nExamples for Dayjs or DateFns provider (used in the demo):\n\n* [DateFns](/packages/rhf-mui/src/DateFnsProvider.tsx)\n* [Dayjs](/packages/rhf-mui/src/DateFnsProvider.tsx)\n\n### Troubleshooting\n\n#### Issues if context is undefined (useWatch)\n\nFor convenient reasons this package is re-exporting `react-hook-form` which is especially required if you have context\nissues of React.\n\n```tsx\nimport {useWatch} from 'react-hook-form-mui' // instead of react-hook-form\n\nconst MySubmit = () =\u003e {\n    const value = useWatch('fieldName')\n    return (\n        \u003cButton disabled={!value}\u003eSubmit\u003c/Button\u003e\n    )\n}\n```\n\n### Bundle\n\nThis project uses `tsup` to wrap the package for `npm`.\n\n\n### Support Maintenance\nIf you find this package useful consider a small contribution:\n[Buy Me A Coffee](https://www.buymeacoffee.com/dohomi)\n\n---\n\n### Contributing\n\nMake sure you're running **Node.js 20**\n\n1. **Fork this repository**\n\nClick the **“Fork”** button on the top-right of the repo:  \n👉 [https://github.com/dohomi/react-hook-form-mui](https://github.com/dohomi/react-hook-form-mui)\n\n2. **Clone your forked repository**\n\nReplace `\u003cyour-username\u003e` with your GitHub username:\n\n```bash\ngit clone https://github.com/\u003cyour-username\u003e/react-hook-form-mui.git\ncd react-hook-form-mui\n```\n\nOptional (but recommended): Add the original repo as a remote named `upstream`:\n\n```bash\ngit remote add upstream https://github.com/dohomi/react-hook-form-mui.git\n```\n\n3. **Install dependencies**\n\n```bash\nyarn\n```\n\n4. **Build the project**\n\n```bash\nyarn build\n```\n\n5. **Run the Storybook**\n\n```bash\nyarn sb-start\n```\n\n6. **Make your changes**\n- Changes to storybook stories can be made in `apps/storybook/stories`. \n- Changes to the library can be made in `packages/rhf-mui`.\n\n7. **Push to a branch on your fork and open a Pull Request**\n\nAfter pushing, GitHub will show a **“Compare \u0026 pull request”** button.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdohomi%2Freact-hook-form-mui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdohomi%2Freact-hook-form-mui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdohomi%2Freact-hook-form-mui/lists"}