react-formesh 0.1.4 → 0.1.5
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 +8 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
**Multi-section forms for React, without the re-render tax.**
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
`react-formesh` is a small, framework-agnostic form state library built for forms that outgrow `useState` — long ERP/CRM-style forms made of independent sections, each merging into one plain JavaScript object, with validation, debounced sync, and derived fields as first-class primitives instead of hand-rolled hooks per component.
|
|
6
6
|
|
|
7
7
|
[](/LICENSE)
|
|
8
8
|
[]()
|
|
@@ -26,9 +26,9 @@ ForMesh starts from that problem instead of retrofitting it:
|
|
|
26
26
|
## Installation
|
|
27
27
|
|
|
28
28
|
```bash
|
|
29
|
-
npm install
|
|
29
|
+
npm install react-formesh
|
|
30
30
|
# or
|
|
31
|
-
pnpm add
|
|
31
|
+
pnpm add react-formesh
|
|
32
32
|
```
|
|
33
33
|
|
|
34
34
|
> **Status:** ForMesh is under active development and not yet published to the public npm registry. The API below reflects what's implemented and tested today; `/file` and `/array` entry points are reserved for upcoming phases (see [Roadmap](#roadmap)).
|
|
@@ -36,8 +36,8 @@ pnpm add @mhasansagor/formesh
|
|
|
36
36
|
## Quick start
|
|
37
37
|
|
|
38
38
|
```tsx
|
|
39
|
-
import { createFormStore } from "
|
|
40
|
-
import { useForm } from "
|
|
39
|
+
import { createFormStore } from "react-formesh";
|
|
40
|
+
import { useForm } from "react-formesh/react";
|
|
41
41
|
|
|
42
42
|
const store = createFormStore({ firstName: "", email: "" });
|
|
43
43
|
|
|
@@ -85,7 +85,7 @@ function JobInfoSection() {
|
|
|
85
85
|
Validators are plain functions — pure, synchronous, composable. Use the built-ins or write your own; both compose identically.
|
|
86
86
|
|
|
87
87
|
```tsx
|
|
88
|
-
import { required, email, minLength } from "
|
|
88
|
+
import { required, email, minLength } from "react-formesh/validators";
|
|
89
89
|
|
|
90
90
|
const form = useForm(store, {
|
|
91
91
|
validation: {
|
|
@@ -111,7 +111,7 @@ form.isValid; // false
|
|
|
111
111
|
One wrapper, any target — a whole store, a section, or (soon) an array row. Writes batch and commit after a quiet period; reads stay live the whole time.
|
|
112
112
|
|
|
113
113
|
```tsx
|
|
114
|
-
import { useDebouncedSync } from "
|
|
114
|
+
import { useDebouncedSync } from "react-formesh/react";
|
|
115
115
|
|
|
116
116
|
function EmployeeInfoSection() {
|
|
117
117
|
const section = useForm(store, { section: "employeeInfo" });
|
|
@@ -124,7 +124,7 @@ function EmployeeInfoSection() {
|
|
|
124
124
|
Derived and cascading fields subscribe to one path and react to real changes only:
|
|
125
125
|
|
|
126
126
|
```tsx
|
|
127
|
-
import { useWatch } from "
|
|
127
|
+
import { useWatch } from "react-formesh/react";
|
|
128
128
|
|
|
129
129
|
useWatch(store, "jobInfo.department", (department) => {
|
|
130
130
|
store.setValue("jobInfo.designation", "");
|