@chris-c-brine/rhf-mui-kit 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +57 -2
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,6 +1,26 @@
|
|
|
1
1
|
# RHF-MUI-KIT
|
|
2
|
+
[](https://www.npmjs.com/package/@chris-c-brine/rhf-mui-kit)
|
|
3
|
+
[](https://github.com/Chris-C-Brine/rhf-mui-kit/blob/main/LICENSE)
|
|
2
4
|
|
|
3
|
-
React Hook Form
|
|
5
|
+
A specialized component library that extends React Hook Form with Material UI integration, providing enhanced form components for complex data handling and display modes.
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- **View Mode Support**: All components support a read-only view mode with appropriate styling
|
|
10
|
+
- **Complex Object Handling**: Work with object values in autocomplete fields with proper type safety
|
|
11
|
+
- **Form Validation**: Integrated error handling with Material UI components
|
|
12
|
+
- **TypeScript Support**: Fully typed components and hooks for better developer experience
|
|
13
|
+
|
|
14
|
+
## Components
|
|
15
|
+
|
|
16
|
+
- **AutocompleteDisplayElement**: Enhanced autocomplete with view-only mode support
|
|
17
|
+
- **ObjectDisplayElement**: Autocomplete for complex objects with key/label extraction
|
|
18
|
+
- **HiddenElement**: Hidden form field with validation support
|
|
19
|
+
|
|
20
|
+
## Hooks
|
|
21
|
+
|
|
22
|
+
- **useFormError**: Extract field errors from React Hook Form
|
|
23
|
+
- **useOnMount**: Run code only on the component's first mount
|
|
4
24
|
|
|
5
25
|
## Installation
|
|
6
26
|
|
|
@@ -8,6 +28,35 @@ React Hook Form MUI Component Library
|
|
|
8
28
|
npm install @chris-c-brine/rhf-mui-kit
|
|
9
29
|
```
|
|
10
30
|
|
|
31
|
+
## Requirements
|
|
32
|
+
|
|
33
|
+
- React 17+
|
|
34
|
+
- Material UI 5+
|
|
35
|
+
- React Hook Form 7+
|
|
36
|
+
- React Hook Form MUI 7+
|
|
37
|
+
|
|
38
|
+
## Basic Usage
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import { ObjectDisplayElement } from '@chris-c-brine/rhf-mui-kit';
|
|
42
|
+
import { FormContainer } from 'react-hook-form-mui';
|
|
43
|
+
|
|
44
|
+
// Example with object values
|
|
45
|
+
const MyForm = () => (
|
|
46
|
+
<FormContainer defaultValues={{ user: null }}>
|
|
47
|
+
<ObjectDisplayElement
|
|
48
|
+
name="user"
|
|
49
|
+
label="Select User"
|
|
50
|
+
options={users}
|
|
51
|
+
multiple
|
|
52
|
+
showChekbox
|
|
53
|
+
getItemKey={(user) => user?.id || ''}
|
|
54
|
+
getItemLabel={(user) => `${user?.lastName}, ${user?.firstName}`.trim()}
|
|
55
|
+
required
|
|
56
|
+
/>
|
|
57
|
+
</FormContainer>
|
|
58
|
+
);
|
|
59
|
+
```
|
|
11
60
|
|
|
12
61
|
## Development
|
|
13
62
|
|
|
@@ -31,6 +80,12 @@ npm run build
|
|
|
31
80
|
npm run dev
|
|
32
81
|
```
|
|
33
82
|
|
|
83
|
+
### Testing
|
|
84
|
+
|
|
85
|
+
```bash
|
|
86
|
+
npm run test
|
|
87
|
+
```
|
|
88
|
+
|
|
34
89
|
## License
|
|
35
90
|
|
|
36
|
-
[AAL](LICENSE) © Christopher C. Brine
|
|
91
|
+
[AAL](https://github.com/Chris-C-Brine/rhf-mui-kit/blob/HEAD/LICENSE) © Christopher C. Brine
|
package/package.json
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chris-c-brine/rhf-mui-kit",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "React Hook Form components with Material UI integration",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
9
9
|
"files": [
|
|
10
|
-
"dist"
|
|
10
|
+
"dist",
|
|
11
|
+
"LICENSE"
|
|
11
12
|
],
|
|
12
13
|
"scripts": {
|
|
13
14
|
"dev": "vite",
|