@formbar/react 0.2.0 → 0.2.1
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 +56 -0
- package/package.json +8 -6
package/README.md
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
# @formbar/react
|
|
2
|
+
|
|
3
|
+
React hooks and accessibility helpers for forms created with `@formbar/core`.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
bun add @formbar/react @formbar/core react
|
|
9
|
+
# or
|
|
10
|
+
npm install @formbar/react @formbar/core react
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Minimal usage
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { useField, useForm } from "@formbar/react";
|
|
17
|
+
|
|
18
|
+
type Contact = {
|
|
19
|
+
email: string;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export function ContactForm() {
|
|
23
|
+
const form = useForm<Contact, Record<string, never>>({
|
|
24
|
+
initialData: { email: "" },
|
|
25
|
+
onSubmit: async ({ payload }) => {
|
|
26
|
+
await saveContact(payload);
|
|
27
|
+
return { ok: true, submitId: "contact-create" };
|
|
28
|
+
},
|
|
29
|
+
});
|
|
30
|
+
const email = useField(form, "email", { label: "Email", required: true });
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<form onSubmit={(event) => void event.preventDefault()}>
|
|
34
|
+
<input
|
|
35
|
+
value={email.get() ?? ""}
|
|
36
|
+
onBlur={() => email.handleBlur()}
|
|
37
|
+
onChange={(event) => email.handleChange(event.currentTarget.value)}
|
|
38
|
+
/>
|
|
39
|
+
<button type="button" onClick={() => void form.submit()}>
|
|
40
|
+
Save
|
|
41
|
+
</button>
|
|
42
|
+
</form>
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## When to use this package
|
|
48
|
+
|
|
49
|
+
- Use `@formbar/react` when you want React lifecycle management, field subscriptions, selectors, and ARIA helpers for a Formbar form.
|
|
50
|
+
- Use `@formbar/core` directly for non-React environments or custom framework bindings.
|
|
51
|
+
- Use `@formbar/react-schema` when forms should be prepared from schemas and rendered through layout nodes.
|
|
52
|
+
|
|
53
|
+
## Dependencies
|
|
54
|
+
|
|
55
|
+
- Depends on `@formbar/core`.
|
|
56
|
+
- Peer dependency: `react >=18.0.0`.
|
package/package.json
CHANGED
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@formbar/react",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "React hooks and a11y utilities for @formbar/core",
|
|
6
6
|
"license": "MIT",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/surikaterna/formbar.git",
|
|
10
|
+
"directory": "packages/react"
|
|
11
|
+
},
|
|
7
12
|
"main": "./dist/index.cjs",
|
|
8
13
|
"module": "./dist/index.js",
|
|
9
14
|
"types": "./dist/index.d.ts",
|
|
@@ -14,10 +19,7 @@
|
|
|
14
19
|
"require": "./dist/index.cjs"
|
|
15
20
|
}
|
|
16
21
|
},
|
|
17
|
-
"files": [
|
|
18
|
-
"dist",
|
|
19
|
-
"src"
|
|
20
|
-
],
|
|
22
|
+
"files": ["dist", "src"],
|
|
21
23
|
"sideEffects": false,
|
|
22
24
|
"scripts": {
|
|
23
25
|
"build": "tsc --noEmit",
|
|
@@ -25,7 +27,7 @@
|
|
|
25
27
|
"test": "vitest run"
|
|
26
28
|
},
|
|
27
29
|
"dependencies": {
|
|
28
|
-
"@formbar/core": "
|
|
30
|
+
"@formbar/core": "^0.2.1"
|
|
29
31
|
},
|
|
30
32
|
"peerDependencies": {
|
|
31
33
|
"react": ">=18.0.0"
|