@conform-to/zod - npm Package Compare versions

Comparing version 0.5.0-pre.0 to 0.5.0

package.json

 {
 	"name": "@conform-to/zod",
-	"description": "Conform schema resolver for Zod",
+	"description": "Conform helpers for integrating with Zod",
 	"license": "MIT",
-	"version": "0.5.0-pre.0",
+	"version": "0.5.0",
 	"main": "index.js",
@@ -17,3 +17,3 @@ "module": "module/index.js",
 	"peerDependencies": {
-		"@conform-to/dom": "0.5.0-pre.0",
+		"@conform-to/dom": "0.5.0",
 		"zod": "^3.0.0"
@@ -20,0 +20,0 @@ },

README.md

 # @conform-to/zod
 
-> [Zod](https://github.com/colinhacks/zod) schema resolver for [conform](https://github.com/edmundhung/conform)
+> [Conform](https://github.com/edmundhung/conform) helpers for integrating with [Zod](https://github.com/colinhacks/zod)
 
@@ -17,5 +17,5 @@ <!-- aside -->
 
-This formats `ZodError` to the **conform** error structure (i.e. A set of key/value pairs).
+This formats **ZodError** to conform's error structure (i.e. A set of key/value pairs).
 
-If the error received is not provided by Zod, it will be treated as a form level error with message set to **error.messages** or **Oops! Something went wrong.** if no fallback message is provided.
+If an error is received instead of the ZodError, it will be treated as a form level error with message set to **error.messages**.
 
@@ -34,3 +34,3 @@ ```tsx
 function ExampleForm() {
-  const formProps = useForm<z.infer<typeof schema>>({
+  const [form] = useForm<z.infer<typeof schema>>({
     onValidate({ formData }) {
@@ -81,9 +81,3 @@ // Only sync validation is allowed on the client side
   } catch (error) {
-    submission.error.push(
-      // The 2nd argument is an optional fallback message
-      ...formatError(
-        error,
-        'The application has encountered an unknown error.',
-      ),
-    );
+    submission.error.push(...formatError(error));
   }
@@ -93,12 +87,2 @@
 };
-
-export default function ExampleRoute() {
-  const state = useActionData();
-  const form = useForm({
-    mode: 'server-validation',
-    state,
-  });
-
-  // ...
-}
 ```
@@ -108,12 +92,19 @@
 
-This tries to infer constraint of each field based on the zod schema. This is useful only for:
+This tries to infer constraint of each field based on the zod schema. This is useful for:
 
-1. Make it easy to style input using CSS, e.g. `:required`
-2. Have some basic validation working before/without JS. But the message is not customizable and it might be simpler and cleaner relying on server validation.
+1. Making it easy to style input using CSS, e.g. `:required`
+2. Having some basic validation working before/without JS
 
 ```tsx
+import { useForm } from '@conform-to/react';
 import { getFieldsetConstraint } from '@conform-to/zod';
+import { z } from 'zod';
 
-function LoginFieldset() {
-  const { email, password } = useFieldset(ref, {
+const schema = z.object({
+  email: z.string().min(1, 'Email is required'),
+  password: z.string().min(1, 'Password is required'),
+});
+
+function Example() {
+  const [form, { email, password }] = useForm({
     constraint: getFieldsetConstraint(schema),
@@ -141,8 +132,5 @@ });
 function ExampleForm() {
-  const formProps = useForm({
+  const [form, { email, password }] = useForm({
     onValidate({ formData }) {
-      return validate(formData, schema, {
-        // Optional
-        fallbackMessage: 'The application has encountered an unknown error.',
-      });
+      return validate(formData, schema);
     },
@@ -149,0 +137,0 @@ });

No alert changes

Worsened metrics

Total package byte prevSize

16989

decreased by-2.15%

Number of lines in readme file

136

decreased by-8.11%

No dependency changes