RHF-MUI-KIT

A specialized component library that extends React Hook Form with Material UI integration, providing enhanced form components for complex data handling and display modes.

Features

• View Mode Support: All components support a read-only view mode with appropriate styling
• Complex Object Handling: Work with object values in autocomplete fields with proper type safety
• Form Validation: Integrated error handling with Material UI components
• TypeScript Support: Fully typed components and hooks for better developer experience

Components

• AutocompleteElementDisplay: Enhanced autocomplete with view-only mode support
• ObjectElementDisplay: Autocomplete for complex objects with key/label extraction
• ValidationElement: Hidden form field with validation support

Hooks

• useFormError: Extract field errors from React Hook Form
• useOnMount: Run code only on the component's first mount

Installation

npm install @chris-c-brine/rhf-mui-kit

Requirements

• React 17+
• Material UI 5+
• React Hook Form 7+
• React Hook Form MUI 7+

Basic Usage

import { ObjectElementDisplay } from '@chris-c-brine/rhf-mui-kit';
import { FormContainer } from 'react-hook-form-mui';

// Example with object values
const MyForm = () => (
  <FormContainer defaultValues={{ user: null }}>
    <ObjectElementDisplay
      name="user"
      label="Select User"
      options={users}
      multiple
      showChekbox
      getItemKey={(user) => user?.id || ''}
      getItemLabel={(user) => `${user?.lastName}, ${user?.firstName}`.trim()}
      required
    />
  </FormContainer>
);

Development

Setup

git clone https://github.com/chris-c-brine/rhf-mui-kit.git
cd rhf-mui-kit
npm install

Build

npm run build

Development Server

npm run dev

Testing

npm run test

License

AAL © Christopher C. Brine