@piplup/rhf-adaptersmui-materialHooks
useMuiFormHelperTextAdapter
Returns adapter props for building custom MUI helper text integrations with React Hook Form field state.
Import
import { useMuiFormHelperTextAdapter } from "@piplup/rhf-adapters/mui-material";Usage
import * as React from 'react';import { FormHelperText, type FormHelperTextProps } from '@mui/material';import { type FieldPath, type FieldValues } from 'react-hook-form';import { useMuiFormHelperTextAdapter, type UseMuiFormHelperTextProps,} from './adapter';export interface MuiFormHelperTextElementProps< TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,> extends Omit<FormHelperTextProps, 'style'>, Omit< UseMuiFormHelperTextProps<TFieldValues, TName>, 'classes' | 'composeClassName' | 'composeHelperText' > { /** * Render component only, if there is an error */ renderOnError?: boolean;}function MuiFormHelperTextComponent< TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,>( props: MuiFormHelperTextElementProps<TFieldValues, TName>, ref?: FormHelperTextProps['ref'],) { const { children, classes, className, control, disabled, disableOnError, disableOnIsSubmitting, error, errorParser, name, renderOnError, style, ...rest } = props; const adapter = useMuiFormHelperTextAdapter( { children, classes, className, composeClassName: false, composeHelperText: true, control, disabled, disableOnError, disableOnIsSubmitting, error, errorParser, name, style, }, ref, ); if (renderOnError && !adapter.error) { // eslint-disable-next-line react/jsx-no-useless-fragment return <></>; } return <FormHelperText {...rest} {...adapter} />;}export const MuiFormHelperTextElement = React.forwardRef( MuiFormHelperTextComponent,) as typeof MuiFormHelperTextComponent & { displayName?: string };if (process.env.NODE_ENV !== 'production') { MuiFormHelperTextElement.displayName = 'MuiFormHelperTextElement';}Props
Prop
Type
Return value
Prop
Type