Getting Started

To optimize bundle size and enable developers to install only the packages they need, this package is split into independent modules.

You can explore the folder structure and its contents by expanding the tree nodes.

• @nish1896/rhf-mui-components
  mui
  mui-pickers
  misc
  config
  form-helpers

• Mui - Includes core Material-UI components such as TextField, Select, and others.
• Mui-Pickers - Contains Material-UI date and time picker components.
• Misc - Features external form components, such as the rich text editor, that are not part of Material-UI.
• Config - Provides a Context Provider to set default styles for all components and configure the dateAdapter for date and time pickers.
• Form Helpers - Utility functions that can come handy and would save you even more time.

To minimize the bundle size during the build process, this package includes both named and default exports within each module. Similar to Material-UI, developers are encouraged to use default import syntax to reduce bundle size.

The type for each component can also be imported to modify or customize an existing component.

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. The properties marked as required are mandatory for that 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. This is a required prop for all components.
control	✅	The control option yielded on calling the useForm hook.
registerOptions		Register options for validation if using react-hook-form without any validation libraries like yup or Joi.
required		Indicates that the field is mandatory by adding an asterisk symbol (*) to the formLabel. This visual cue helps users quickly identify required fields in the form.
disabled		A boolean value to enable or disable editing of the form field.
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		The content to display within the FormHelperText component below the field. If the field validation fails, this content will be overridden by the corresponding error message.
errorMessage		Error message to be shown for a field in FormHelperText component.
hideErrorMessage		A flag to prevent replacement of helper text of a field by the error message when the validation is triggered.
formHelperTextProps		FormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component.