@conform-to/yup - npm Package Compare versions

Comparing version 0.5.0-pre.0 to 0.5.0

package.json

		{
		"name": "@conform-to/yup",
		"description": "Conform schema resolver for yup",
		"description": "Conform helpers for integrating with yup",
		"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",
		"yup": ">=0.32.0"
		@@ -20,0 +20,0 @@ },

README.md

		# @conform-to/yup

		> [Yup](https://github.com/jquense/yup) schema resolver for [conform](https://github.com/edmundhung/conform)
		> [Conform](https://github.com/edmundhung/conform) helpers for integrating with [Yup](https://github.com/jquense/yup)

		@@ -17,5 +17,5 @@ <!-- aside -->

		This formats Yup `ValidationError` to the conform error structure (i.e. A set of key/value pairs).
		This formats Yup ValidationError to conform's error structure (i.e. A set of key/value pairs).

		If the error received is not provided by Yup, 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 Yup ValidationError, it will be treated as a form level error with message set to error.messages.

		@@ -27,3 +27,2 @@ ```tsx

		// Define the schema with yup
		const schema = yup.object({
		@@ -35,3 +34,3 @@ email: yup.string().required(),
		function ExampleForm() {
		const formProps = useForm<yup.InferType<typeof schema>>({
		const [form] = useForm<yup.InferType<typeof schema>>({
		onValidate({ formData }) {
		@@ -46,9 +45,3 @@ const submission = parse(formData);
		} 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));
		}
		@@ -97,3 +90,3 @@
		const state = useActionData();
		const form = useForm({
		const [form] = useForm({
		mode: 'server-validation',
		@@ -109,14 +102,19 @@ state,

		This tries to infer constraint of each field based on the yup schema. This is useful only for:
		This tries to infer constraint of each field based on the yup 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/yup';
		import * as yup from 'yup';

		function LoginFieldset() {
		const form = useForm();
		const { email, password } = useFieldset(ref, {
		...form.config,
		const schema = yup.object({
		email: yup.string().required(),
		password: yup.string().required(),
		});

		function Example() {
		const [form, { email, password }] = useForm({
		constraint: getFieldsetConstraint(schema),
		@@ -144,8 +142,5 @@ });
		function ExampleForm() {
		const formProps = useForm({
		const [form] = useForm({
		onValidate({ formData }) {
		return validate(formData, schema, {
		// Optional
		fallbackMessage: 'The application has encountered an unknown error.',
		});
		return validate(formData, schema);
		},
		@@ -152,0 +147,0 @@ });

@conform-to/yup - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics