{"_id":"@ayazhussein/react-hook-form-mui","_rev":"2-154aee2e003702ffa69011691fbeb543","name":"@ayazhussein/react-hook-form-mui","dist-tags":{"latest":"7.4.2"},"versions":{"7.4.1":{"name":"@ayazhussein/react-hook-form-mui","version":"7.4.1","keywords":["react","mui","material-ui","react-hook-form"],"author":{"name":"Dominic Garms"},"license":"MIT","_id":"@ayazhussein/react-hook-form-mui@7.4.1","maintainers":[{"name":"ayazhussein","email":"ayazhussein@gmail.com"}],"homepage":"https://github.com/useHEARD/react-hook-form-mui#readme","bugs":{"url":"https://github.com/useHEARD/react-hook-form-mui/issues"},"dist":{"shasum":"863f2f32623db55d894ffe0d6a0ae041c1eead2e","tarball":"https://registry.npmjs.org/@ayazhussein/react-hook-form-mui/-/react-hook-form-mui-7.4.1.tgz","fileCount":50,"integrity":"sha512-6G1QAIo/rJwRwBwZP3fliscDe8M956HF+b5Hrdz1V83bP2Vz+FqR7pKEGiLC+1eicngihQeVxfxyUqV/zYgnMg==","signatures":[{"sig":"MEQCIFav4o9BDQO2omu6RLol1u/B9YAPBJLgNbeRDDe2U5D8AiAjno72FlWUt2buFO97qptb018LoOylEp1ANorgf0TRTw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":494752},"main":"dist/index.js","module":"dist/esm/index.js","source":"src/index.ts","engines":{"node":">=14"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/esm/index.js","require":"./dist/index.js"},"./date-fns":{"types":"./dist/date-fns.d.ts","import":"./dist/esm/date-fns.js","require":"./dist/date-fns.js"},"./date-pickers":{"types":"./dist/date-pickers.d.ts","import":"./dist/esm/date-pickers.js","require":"./dist/date-pickers.js"},"./package.json":"./package.json"},"gitHead":"79ed08aa7e80a985f6314ad88ee4617c4c7a7a75","scripts":{"build":"tsup src/index.ts src/date-fns.ts src/date-pickers.ts --clean --format esm,cjs --dts --external react --inject ./react-shim.js --legacy-output --minify --sourcemap","watch":"tsup src/index.ts src/date-fns.ts src/date-pickers.ts --clean --format esm,cjs --watch --dts --external react --inject ./react-shim.js --legacy-output --minify --sourcemap","prepare":"npm run build","npmPublish":"npm publish","check-types":"tsc --noemit","release-major":"npm run build && npm run check-types && release major","release-minor":"npm run build && npm run check-types && release minor","release-patch":"npm run build && npm run check-types && release patch"},"typings":"dist/index.d.ts","_npmUser":{"name":"ayazhussein","email":"ayazhussein@gmail.com"},"repository":{"url":"git+https://github.com/useHEARD/react-hook-form-mui.git","type":"git"},"workspaces":["apps/*","packages/*"],"_npmVersion":"10.9.2","description":"<div align=\"center\">   <a href=\"https://react-hook-form-material-ui.vercel.app/\" rel=\"noopener\" target=\"_blank\">     <img src=\"./rhf-mui.png\" alt=\"Material-UI and react-hook-form combined\" />   </a> </div>","directories":{},"_nodeVersion":"22.16.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^6.1.2","react":"19.1.1","release":"^6.3.1","date-fns":"4.1.0","@swc/core":"^1.3.17","react-dom":"19.1.1","typescript":"5.5.3","@mui/system":"7.3.1","@types/react":"^18.0.14","@mui/material":"7.3.1","@emotion/cache":"11.14.0","@emotion/react":"11.14.0","@emotion/server":"11.11.0","@emotion/styled":"11.14.1","react-hook-form":"7.62.0","@types/react-dom":"^18.0.5","@mui/icons-material":"7.3.1","@mui/x-date-pickers":"8.10.2","react-docgen-typescript-loader":"^3.7.2"},"peerDependencies":{"react":">=17 <20","@mui/material":">= 5.x <8","react-hook-form":">=7.62.0","@mui/icons-material":">= 5.x <8","@mui/x-date-pickers":">=8.10.2 <9"},"peerDependenciesMeta":{"@mui/icons-material":{"optional":true},"@mui/x-date-pickers":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-hook-form-mui_7.4.1_1755769269570_0.2520079075716164","host":"s3://npm-registry-packages-npm-production"}},"7.4.2":{"version":"7.4.2","license":"MIT","repository":{"type":"git","url":"git+https://github.com/useHEARD/react-hook-form-mui.git"},"keywords":["react","mui","material-ui","react-hook-form"],"workspaces":["apps/*","packages/*"],"name":"@ayazhussein/react-hook-form-mui","author":{"name":"Dominic Garms"},"source":"src/index.ts","main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","exports":{"./package.json":"./package.json",".":{"types":"./dist/index.d.ts","import":"./dist/esm/index.js","require":"./dist/index.js"},"./date-fns":{"types":"./dist/date-fns.d.ts","import":"./dist/esm/date-fns.js","require":"./dist/date-fns.js"},"./date-pickers":{"types":"./dist/date-pickers.d.ts","import":"./dist/esm/date-pickers.js","require":"./dist/date-pickers.js"}},"engines":{"node":">=14"},"scripts":{"prepare":"npm run build","check-types":"tsc --noemit","build":"tsup src/index.ts src/date-fns.ts src/date-pickers.ts --clean --format esm,cjs --dts --external react --inject ./react-shim.js --legacy-output --minify --sourcemap","watch":"tsup src/index.ts src/date-fns.ts src/date-pickers.ts --clean --format esm,cjs --watch --dts --external react --inject ./react-shim.js --legacy-output --minify --sourcemap","release-minor":"npm run build && npm run check-types && release minor","release-patch":"npm run build && npm run check-types && release patch","release-major":"npm run build && npm run check-types && release major","npmPublish":"npm publish"},"peerDependencies":{"@mui/icons-material":">= 5.x <8","@mui/material":">= 5.x <8","@mui/x-date-pickers":">=8.10.2 <9","react":">=17 <20","react-hook-form":">=7.62.0"},"peerDependenciesMeta":{"@mui/icons-material":{"optional":true},"@mui/x-date-pickers":{"optional":true}},"devDependencies":{"@emotion/cache":"11.14.0","@emotion/react":"11.14.0","@emotion/server":"11.11.0","@emotion/styled":"11.14.1","@mui/icons-material":"7.3.1","@mui/material":"7.3.1","@mui/system":"7.3.1","@mui/x-date-pickers":"8.10.2","@swc/core":"^1.3.17","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","date-fns":"4.1.0","react":"19.1.1","react-docgen-typescript-loader":"^3.7.2","react-dom":"19.1.1","react-hook-form":"7.62.0","release":"^6.3.1","tsup":"^6.1.2","typescript":"5.5.3"},"_id":"@ayazhussein/react-hook-form-mui@7.4.2","gitHead":"79ed08aa7e80a985f6314ad88ee4617c4c7a7a75","description":"<div align=\"center\">   <a href=\"https://react-hook-form-material-ui.vercel.app/\" rel=\"noopener\" target=\"_blank\">     <img src=\"./rhf-mui.png\" alt=\"Material-UI and react-hook-form combined\" />   </a> </div>","bugs":{"url":"https://github.com/useHEARD/react-hook-form-mui/issues"},"homepage":"https://github.com/useHEARD/react-hook-form-mui#readme","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-DUeJD/kkGcD+023oBrIrFYE/3lzi90NWRONITg5EJHWdr8eNwMOgtU9Ls3w4GPBuMX4x3CNdPtDwFMLsPcFuqw==","shasum":"d24db00d1bfdbe3800e7957a73e483308f24e3bb","tarball":"https://registry.npmjs.org/@ayazhussein/react-hook-form-mui/-/react-hook-form-mui-7.4.2.tgz","fileCount":50,"unpackedSize":494752,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDfvulMtKKdpnHCurbtcM6Hf//IAnJm5HDAOvMWmbIrkAIhAJPPnT7sQ4K9l8aV9lTppy6wWgEyFeMPsXl+cuR7qI0+"}]},"_npmUser":{"name":"ayazhussein","email":"ayazhussein@gmail.com"},"directories":{},"maintainers":[{"name":"ayazhussein","email":"ayazhussein@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-hook-form-mui_7.4.2_1755769521862_0.5078888547358489"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-21T09:41:09.436Z","modified":"2025-08-21T09:45:22.199Z","7.4.1":"2025-08-21T09:41:09.813Z","7.4.2":"2025-08-21T09:45:22.035Z"},"bugs":{"url":"https://github.com/useHEARD/react-hook-form-mui/issues"},"author":{"name":"Dominic Garms"},"license":"MIT","homepage":"https://github.com/useHEARD/react-hook-form-mui#readme","keywords":["react","mui","material-ui","react-hook-form"],"repository":{"type":"git","url":"git+https://github.com/useHEARD/react-hook-form-mui.git"},"description":"<div align=\"center\">   <a href=\"https://react-hook-form-material-ui.vercel.app/\" rel=\"noopener\" target=\"_blank\">     <img src=\"./rhf-mui.png\" alt=\"Material-UI and react-hook-form combined\" />   </a> </div>","maintainers":[{"name":"ayazhussein","email":"ayazhussein@gmail.com"}],"readme":"# Material-UI and react-hook-form combined\n\n<div align=\"center\">\n  <a href=\"https://react-hook-form-material-ui.vercel.app/\" rel=\"noopener\" target=\"_blank\">\n    <img src=\"./rhf-mui.png\" alt=\"Material-UI and react-hook-form combined\" />\n  </a>\n</div>\n\n<div align=\"center\">\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</div>\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* 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 >= 3.x of this package MUI v5 is in use. Versions of 1 & 2 using Material-UI v4\n\n### Your component code\n\n```tsx\nimport {FormContainer, TextFieldElement} from 'react-hook-form-mui'\n\nfunction Form() {\n    return (\n        <FormContainer\n            defaultValues={{name: ''}}\n            onSuccess={data => console.log(data)}\n        >\n            <TextFieldElement name=\"name\" label=\"Name\" required/>\n        </FormContainer>\n    )\n}\n```\n\nYou can have a look at the [`example`](apps/nextjs/) folder which sets up NextJS with `react-hook-form-mui`\n\n### FormContainer creates `formContext`\n\nThe `<FormContainer />` 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 = () => {\n    const value = useWatch('fieldName')\n    return (\n        <Button disabled={!value}>Submit</Button>\n    )\n}\n```\n\n### Bundle\n\nThis project uses `tsup` to wrap the package for `npm`.\n","readmeFilename":"README.md"}