@goodie-forms/react 1.3.0 → 1.3.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 +108 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -52,6 +52,114 @@
|
|
|
52
52
|
|
|
53
53
|
React package of Goodie Forms.
|
|
54
54
|
|
|
55
|
+
# Quick Example
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
import { useForm } from "@goodie-forms/react";
|
|
59
|
+
import z from "zod";
|
|
60
|
+
|
|
61
|
+
// 1. Define a schema for your form data
|
|
62
|
+
const userRegisterSchema = z.object({
|
|
63
|
+
name: z.string().min(1, "Name is required"),
|
|
64
|
+
email: z.string().email("Invalid email address"),
|
|
65
|
+
password: z.string().min(6, "Password must be at least 6 characters"),
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
export function App() {
|
|
69
|
+
// 2. Create a form with the schema
|
|
70
|
+
const form = useForm(
|
|
71
|
+
{
|
|
72
|
+
validationSchema: userRegisterSchema,
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
validationMode: "onBlur",
|
|
76
|
+
revalidationMode: "onChange",
|
|
77
|
+
},
|
|
78
|
+
);
|
|
79
|
+
|
|
80
|
+
// 3. Create a submit handler
|
|
81
|
+
const handleSubmit = form.createSubmitHandler(async (data) => {
|
|
82
|
+
console.log("Form submitted successfully with data:", data);
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
return (
|
|
86
|
+
// 4. Bind submit handler to the form element
|
|
87
|
+
<form onClick={handleSubmit}>
|
|
88
|
+
{/* 5. Render fields */}
|
|
89
|
+
<FieldRenderer
|
|
90
|
+
form={form}
|
|
91
|
+
path={form.path.of("name")}
|
|
92
|
+
defaultValue=""
|
|
93
|
+
render={({ fieldProps, field, form }) => (
|
|
94
|
+
<div>
|
|
95
|
+
<input
|
|
96
|
+
{...fieldProps}
|
|
97
|
+
type="text"
|
|
98
|
+
disabled={form.controller.isSubmitting}
|
|
99
|
+
/>
|
|
100
|
+
{field.issues.length > 0 && (
|
|
101
|
+
<div className="issues">
|
|
102
|
+
{field.issues.map((issue) => (
|
|
103
|
+
<p key={issue.id}>{issue.message}</p>
|
|
104
|
+
))}
|
|
105
|
+
</div>
|
|
106
|
+
)}
|
|
107
|
+
</div>
|
|
108
|
+
)}
|
|
109
|
+
/>
|
|
110
|
+
|
|
111
|
+
{/* 5. Render fields */}
|
|
112
|
+
<FieldRenderer
|
|
113
|
+
form={form}
|
|
114
|
+
path={form.path.of("email")}
|
|
115
|
+
defaultValue=""
|
|
116
|
+
render={({ fieldProps, field }) => (
|
|
117
|
+
<div>
|
|
118
|
+
<input
|
|
119
|
+
{...fieldProps}
|
|
120
|
+
type="email"
|
|
121
|
+
disabled={form.controller.isSubmitting}
|
|
122
|
+
/>
|
|
123
|
+
{field.issues.length > 0 && (
|
|
124
|
+
<div className="issues">
|
|
125
|
+
{field.issues.map((issue) => (
|
|
126
|
+
<p key={issue.id}>{issue.message}</p>
|
|
127
|
+
))}
|
|
128
|
+
</div>
|
|
129
|
+
)}
|
|
130
|
+
</div>
|
|
131
|
+
)}
|
|
132
|
+
/>
|
|
133
|
+
|
|
134
|
+
{/* 5. Render fields */}
|
|
135
|
+
<FieldRenderer
|
|
136
|
+
form={form}
|
|
137
|
+
path={form.path.of("password")}
|
|
138
|
+
defaultValue=""
|
|
139
|
+
render={({ fieldProps, field }) => (
|
|
140
|
+
<div>
|
|
141
|
+
<input
|
|
142
|
+
{...fieldProps}
|
|
143
|
+
type="password"
|
|
144
|
+
disabled={form.controller.isSubmitting}
|
|
145
|
+
/>
|
|
146
|
+
{field.issues.length > 0 && (
|
|
147
|
+
<div className="issues">
|
|
148
|
+
{field.issues.map((issue) => (
|
|
149
|
+
<p key={issue.id}>{issue.message}</p>
|
|
150
|
+
))}
|
|
151
|
+
</div>
|
|
152
|
+
)}
|
|
153
|
+
</div>
|
|
154
|
+
)}
|
|
155
|
+
/>
|
|
156
|
+
|
|
157
|
+
<button type="submit">Submit</button>
|
|
158
|
+
</form>
|
|
159
|
+
);
|
|
160
|
+
}
|
|
161
|
+
```
|
|
162
|
+
|
|
55
163
|
## License
|
|
56
164
|
|
|
57
165
|
© 2026 Taha Anılcan Metinyurt (iGoodie)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@goodie-forms/react",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.1",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/iGoodie/goodie-forms"
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"react-dom": "^18 || ^19"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@goodie-forms/core": "1.3.
|
|
34
|
+
"@goodie-forms/core": "1.3.1"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@types/react": "^19.2.9",
|