This project simplifies the use of react-hook-form
and 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 for the element overview.
# npm install react-hook-form react-hook-form-mui
# yarn add react-hook-form react-hook-form-muiThis package utilizes pickers and icons of the MUI ecosystem. If you make use of it add them to your app.
# npm install @mui/x-date-pickers @mui/icons-material
# yarn add @mui/x-date-pickers @mui/icons-materialFrom 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.
import {FormContainer, TextFieldElement} from 'react-hook-form-mui'
function Form() {
return (
<FormContainer
defaultValues={{name: ''}}
onSuccess={data => console.log(data)}
>
<TextFieldElement name="name" label="Name" required/>
</FormContainer>
)
} 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 (
<form onSubmit={handleSubmit((data) => console.log(data))} noValidate>
<Stack spacing={2}>
<TextFieldElement
name={'name'}
label={'Name'}
control={control}
required
fullWidth
/>
<AutocompleteElement
name={'auto'}
label={'Autocomplete'}
control={control}
options={options}
/>
<CheckboxElement name={'check'} label={'Check'} control={control} />
<Button type={'submit'} color={'primary'}>
Submit
</Button>
</Stack>
</form>
)
}You can have a look at all different possibilities to use forms at following code examples
The <FormContainer /> wires up a form and you can create sub-components which either make use
of useFormContext() | useWatch() to react to form values.
Check out Storybook: Demo
You will find examples and use cases.
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):
For convenient reasons this package is re-exporting react-hook-form which is especially required if you have context
issues of React.
import {useWatch} from 'react-hook-form-mui' // instead of react-hook-form
const MySubmit = () => {
const value = useWatch('fieldName')
return (
<Button disabled={!value}>Submit</Button>
)
}This project uses tsup to wrap the package for npm.
If you find this package useful consider a small contribution: Buy Me A Coffee
Make sure you're running Node.js 20
- Clone this repository
git clone https://github.com/dohomi/react-hook-form-mui.git
cd react-hook-form-mui- Install dependencies
yarn- Build the project
yarn build- Run the storybook
yarn sb-startChanges to storybook stories can be made in apps/storybook/stories. Changes to the library can be made in packages/rhf-mui.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent