MUI-RHF-components
MUI-RHF-components is a library that extracts common Material UI and React-Hook-Form integrations. This library provides building blocks to quickly start building forms without limiting any of the customizability that MUI offers. All of the props exposed by MUI are still accessible.
Prerequisites
Install react-hook-form and material-ui
npm install react-hook-form @material-ui/core
Installation
npm install mui-react-hook-form
Quick Start
import {
CheckboxGroup,
Form,
RadioButtonGroup,
SelectInput,
TextField
} from 'mui-react-hook-form'
import { useForm } from 'react-hook-form'
import { Button } from '@material-ui/core'
const App = () => {
const formMethods = useForm()
const onSubmit = (submittedData) => console.log(submittedData)
return (
<Form
formMethods={formMethods}
onSubmit={onSubmit}>
<TextField name="firstName" label="first name" />
<SelectInput
name="state"
label="State"
options={[
{ value: 'IL', label: 'Illinois' },
{ value: 'MO', label: 'Missouri' }
]}
/>
<CheckboxGroup
name="foods"
label="Foods I Like"
options={[
{ value: 'pizza', label: 'Pizza' },
{ value: 'salad', label: 'Salad' }
]}
/>
<RadioButtonGroup
name="favoriteColor"
label="Favorite Color"
options={[
{ value: 'red', label: 'Red' },
{ value: 'blue', label: 'Blue' }
]}
/>
<Button type="submit">Submit</Button>
</Form>
</div>
)
}
export default App
Examples
API
Form
Props | Options | Required | Description |
---|---|---|---|
formMethods | useForm return values | x | this prop provides the RHF form Methods to all children components |
onSubmit | function handler | x | hanldes submit event |
Any other props that are given will be passed down to the form component
TextField
Props | Options | Required | Description |
---|---|---|---|
name | string | x | Unique Name for RHF |
label | string | input label | |
defaultValue | string or number | Default Value for Controller | |
required | boolean | adds required validation to useController hook as well as the MUI input | |
useControllerProps | useControllerProps | allows access to RHF useController Prop |
Any other props that are given will be passed down to the input component
SelectInput
Props | Options | Required | Description |
---|---|---|---|
name | string | x | Unique Name for RHF |
options | { value: any; label: string }[] | x | select options |
label | string | input label | |
required | boolean | adds required validation to useController hook as well as the MUI input | |
defaultValue | string or number | Default Value for Controller | |
useControllerProps | useControllerProps | allows access to RHF useController Prop |
Any other props that are given will be passed down to the input component
Checkbox Group
Props | Options | Required | Description |
---|---|---|---|
name | string | x | Unique Name for RHF |
options | { value: any; label: string }[] | x | value/label for checkbox |
label | string | label for group | |
controllerProps | controllerProps | allows access to RHF useController Prop | |
formLabelProps | formLabelProps | allows access to MUI formLabel Prop | |
formGroupProps | formGroupProps | allows access to MUI formGroup Prop | |
formControlProps | formControlProps | allows access to MUI formControl Prop | |
formControlLabelProps | formControlLabelProps | allows access to MUI formControlLabel Prop | |
checkboxProps | checkboxProps | allows access to MUI Checkbox Prop |
RadioButtonGroup
Props | Options | Required | Description |
---|---|---|---|
name | string | x | Unique Name for RHF |
options | { value: any; label: string }[] | x | value/label for checkbox |
label | string | label for group | |
defaultValue | string or number | Default Value for Controller | |
useControllerProps | useControllerProps | allows access to RHF useController Prop | |
formLabelProps | formLabelProps | allows access to MUI formLabel Prop | |
radioGroupProps | radioGroupProps | allows access to MUI radioGroup Prop | |
formControlProps | formControlProps | allows access to MUI formControl Prop | |
formControlLabelProps | formControlLabelProps | allows access to MUI formControlLabel Prop | |
radioProps | checkboxProps | allows access to MUI Radio Prop |
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.