Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dohomi/react-hook-form-mui
Material-UI form components ready to use with react-hook-form
https://github.com/dohomi/react-hook-form-mui
material-ui react react-hook-form typescript
Last synced: about 1 month ago
JSON representation
Material-UI form components ready to use with react-hook-form
- Host: GitHub
- URL: https://github.com/dohomi/react-hook-form-mui
- Owner: dohomi
- License: mit
- Created: 2020-05-14T02:23:14.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-15T00:46:17.000Z (about 2 months ago)
- Last Synced: 2024-07-15T01:44:54.914Z (about 2 months ago)
- Topics: material-ui, react, react-hook-form, typescript
- Language: JavaScript
- Homepage: https://react-hook-form-material-ui.vercel.app
- Size: 53.2 MB
- Stars: 513
- Watchers: 9
- Forks: 101
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Material-UI and react-hook-form combined
[](http://isitmaintained.com/project/dohomi/react-hook-form-mui 'Average time to resolve an issue')
[](http://isitmaintained.com/project/dohomi/react-hook-form-mui 'Percentage of issues still open')
## About this project
This project simplifies the use of [`react-hook-form`](https://github.com/react-hook-form/react-hook-form)
and [`Material-UI`](https://github.com/mui/material-ui). It provides opinionated use cases with following
components:
* FormContainer
* AutocompleteElement
* TextFieldElement
* SelectElement
* MultiSelectElement
* RadioButtonGroup
* CheckboxButtonGroup
* CheckboxElement
* SwitchElement
* PasswordElement
* DatePickerElement
* DateTimePickerElement
* SliderElement
* ToggleButtonGroupElement
Please check out the [demo](https://react-hook-form-material-ui.vercel.app/) for the element overview.
## How to use it
### Installation
```console
# npm install react-hook-form react-hook-form-mui
# yarn add react-hook-form react-hook-form-mui
```
This package utilizes pickers and icons of the MUI ecosystem. If you make use of it add them to your app.
```console
# npm install @mui/x-date-pickers @mui/icons-material
# yarn add @mui/x-date-pickers @mui/icons-material
```
### Important
From versions >= 3.x of this package MUI v5 is in use. Versions of 1 & 2 using Material-UI v4
From version >= 6 x-date-pickers version 6 is in use. Make sure you upgrade your dependencies.
### Simple form setup
```tsx
import {FormContainer, TextFieldElement} from 'react-hook-form-mui'
function Form() {
return (
console.log(data)}
>
)
}
```
### Typesafe form setup
```tsx
function Form() {
const {control, handleSubmit} = useForm({
defaultValues: {
name: '',
auto: '',
check: false
},
})
const options = [
{id: 'one', label: 'One'},
{id: 'two', label: 'Two'},
{id: 'three', label: 'Three'},
]
return (
console.log(data))} noValidate>
Submit
)
}
```
You can have a look at all different possibilities to use forms at following [`code examples`](apps/storybook/stories/FormContainer.stories.tsx)
### FormContainer creates `formContext`
The `` wires up a form and you can create sub-components which either make use
of `useFormContext() | useWatch()` to react to form values.
## Demo
Check out Storybook: [Demo](https://react-hook-form-material-ui.vercel.app)
You will find examples and use cases.
### With Datepicker
If you are using the `DatepickerElement` keep in mind that you have to wrap your form with a provider:
Examples for Dayjs or DateFns provider (used in the demo):
* [DateFns](/packages/rhf-mui/src/DateFnsProvider.tsx)
* [Dayjs](/packages/rhf-mui/src/DateFnsProvider.tsx)
### Troubleshooting
#### Issues if context is undefined (useWatch)
For convenient reasons this package is re-exporting `react-hook-form` which is especially required if you have context
issues of React.
```tsx
import {useWatch} from 'react-hook-form-mui' // instead of react-hook-form
const MySubmit = () => {
const value = useWatch('fieldName')
return (
Submit
)
}
```
### Bundle
This project uses `tsup` to wrap the package for `npm`.
### Support Maintanance
If you find this package useful consider a small contribution:
[Buy Me A Coffee](https://www.buymeacoffee.com/dohomi)
### Contributing
Make sure you're running Node.js 20
1. Clone this repository
```bash
git clone https://github.com/dohomi/react-hook-form-mui.git
cd react-hook-form-mui
```
2. Install dependencies
```bash
yarn
```
3. Build the project
```bash
yarn build
```
4. Run the storybook
```bash
yarn sb-start
```
Changes to storybook stories can be made in `apps/storybook/stories`. Changes to the library can be made in `packages/rhf-mui`.