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

Basic Example

Validation Example

InitializedData Example

Custom Styles Example

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.