@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 @@ });

@conform-to/zod - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics