Introduction

Easily design forms in minutes using the popular react-hook-form library alongside Material-UI This package offers a suite of reusable and customizable MUI components, reducing code duplication and providing the flexibility to style form fields according to your website's design.

Installation

To get started, install react-hook-form and @nish1896/rhf-mui-components.

npm i react-hook-form @nish1896/rhf-mui-components

yarn add react-hook-form @nish1896/rhf-mui-components

Ensure that you also have installed Material UI. If not, refer to the installation guide. For datepickers, follow the installation guide to install @mui/x-date-pickers.

Optional : If you are using a third party library for form validation, say joi, make sure to install its npm package along with the @hookform/resolvers package.

npm i @hookform/resolvers joi

yarn add @hookform/resolvers joi

Working

Each component requires a set of common props, detailed in the table below. Some props might be specific to a component, say DatePicker, and can be viewed in the documentation page for the respective component.

You can also import the interface of each component, like RHFDatePickerProps to extend an existing component or create another reusable component from it.

Name	Required	Description
fieldName	✅	React Hook Form requires name as a key for the registration process.
register	✅	The register option yielded on calling the useForm hook.
registerOptions		Register options if using react-hook-form without any validation libraries like yup or Joi.
control	✅	The control option yielded on calling the useForm hook.
setValue	✅	The setValue option yielded on calling the useForm hook.
onValueChange		An optional callback function when the value of a field changes. Method signature can be viewed for each component in its documentation page.
label		The text to render in FormLabel component. By default, the value of fieldName such as firstName will be transformed to display "First Name".
showLabelAboveFormField		Render form label above the form field in FormLabel component.
formLabelProps		FormLabelProps to customise FormLabel component for a field. Multiple fields can be configured using the ConfigProvider component.
formControlLabelProps		FormControlLabelProps to customise FormControlLabel component for a field. Multiple fields can be configured using the ConfigProvider component.
helperText		Optional helperText to render under RHFSelect or RHFNativeSelect field.
errorMessage		Error message to be shown for a field in FormHelperText component.
hideErrorMessage		Prevent replacing of form HelperText by error message during validation trigger.
formHelperTextProps		FormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component.