mui-rhf-components
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

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.

Package Sidebar

Install

npm i mui-rhf-components

Weekly Downloads

1

Version

1.0.4

License

ISC

Unpacked Size

42.4 kB

Total Files

26

Last publish

Collaborators

  • benjamhawk