@conform-to/yup 0.4.1 → 0.5.0
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 +20 -25
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @conform-to/yup
|
|
2
2
|
|
|
3
|
-
> [
|
|
3
|
+
> [Conform](https://github.com/edmundhung/conform) helpers for integrating with [Yup](https://github.com/jquense/yup)
|
|
4
4
|
|
|
5
5
|
<!-- aside -->
|
|
6
6
|
|
|
@@ -14,23 +14,22 @@
|
|
|
14
14
|
|
|
15
15
|
### formatError
|
|
16
16
|
|
|
17
|
-
This formats Yup
|
|
17
|
+
This formats Yup **ValidationError** to conform's error structure (i.e. A set of key/value pairs).
|
|
18
18
|
|
|
19
|
-
If
|
|
19
|
+
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**.
|
|
20
20
|
|
|
21
21
|
```tsx
|
|
22
22
|
import { useForm, parse } from '@conform-to/react';
|
|
23
23
|
import { formatError } from '@conform-to/yup';
|
|
24
24
|
import * as yup from 'yup';
|
|
25
25
|
|
|
26
|
-
// Define the schema with yup
|
|
27
26
|
const schema = yup.object({
|
|
28
27
|
email: yup.string().required(),
|
|
29
28
|
password: yup.string().required(),
|
|
30
29
|
});
|
|
31
30
|
|
|
32
31
|
function ExampleForm() {
|
|
33
|
-
const
|
|
32
|
+
const [form] = useForm<yup.InferType<typeof schema>>({
|
|
34
33
|
onValidate({ formData }) {
|
|
35
34
|
const submission = parse(formData);
|
|
36
35
|
|
|
@@ -40,13 +39,7 @@ function ExampleForm() {
|
|
|
40
39
|
abortEarly: false,
|
|
41
40
|
});
|
|
42
41
|
} catch (error) {
|
|
43
|
-
submission.error.push(
|
|
44
|
-
// The 2nd argument is an optional fallback message
|
|
45
|
-
...formatError(
|
|
46
|
-
error,
|
|
47
|
-
'The application has encountered an unknown error.',
|
|
48
|
-
),
|
|
49
|
-
);
|
|
42
|
+
submission.error.push(...formatError(error));
|
|
50
43
|
}
|
|
51
44
|
|
|
52
45
|
return submission;
|
|
@@ -90,7 +83,7 @@ export let action = async ({ request }) => {
|
|
|
90
83
|
|
|
91
84
|
export default function ExampleRoute() {
|
|
92
85
|
const state = useActionData();
|
|
93
|
-
const form = useForm({
|
|
86
|
+
const [form] = useForm({
|
|
94
87
|
mode: 'server-validation',
|
|
95
88
|
state,
|
|
96
89
|
});
|
|
@@ -101,18 +94,23 @@ export default function ExampleRoute() {
|
|
|
101
94
|
|
|
102
95
|
### getFieldsetConstraint
|
|
103
96
|
|
|
104
|
-
This tries to infer constraint of each field based on the yup schema. This is useful
|
|
97
|
+
This tries to infer constraint of each field based on the yup schema. This is useful for:
|
|
105
98
|
|
|
106
|
-
1.
|
|
107
|
-
2.
|
|
99
|
+
1. Making it easy to style input using CSS, e.g. `:required`
|
|
100
|
+
2. Having some basic validation working before/without JS.
|
|
108
101
|
|
|
109
102
|
```tsx
|
|
103
|
+
import { useForm } from '@conform-to/react';
|
|
110
104
|
import { getFieldsetConstraint } from '@conform-to/yup';
|
|
105
|
+
import * as yup from 'yup';
|
|
106
|
+
|
|
107
|
+
const schema = yup.object({
|
|
108
|
+
email: yup.string().required(),
|
|
109
|
+
password: yup.string().required(),
|
|
110
|
+
});
|
|
111
111
|
|
|
112
|
-
function
|
|
113
|
-
const form = useForm(
|
|
114
|
-
const { email, password } = useFieldset(ref, {
|
|
115
|
-
...form.config,
|
|
112
|
+
function Example() {
|
|
113
|
+
const [form, { email, password }] = useForm({
|
|
116
114
|
constraint: getFieldsetConstraint(schema),
|
|
117
115
|
});
|
|
118
116
|
|
|
@@ -135,12 +133,9 @@ const schema = yup.object({
|
|
|
135
133
|
});
|
|
136
134
|
|
|
137
135
|
function ExampleForm() {
|
|
138
|
-
const
|
|
136
|
+
const [form] = useForm({
|
|
139
137
|
onValidate({ formData }) {
|
|
140
|
-
return validate(formData, schema
|
|
141
|
-
// Optional
|
|
142
|
-
fallbackMessage: 'The application has encountered an unknown error.',
|
|
143
|
-
});
|
|
138
|
+
return validate(formData, schema);
|
|
144
139
|
},
|
|
145
140
|
});
|
|
146
141
|
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@conform-to/yup",
|
|
3
|
-
"description": "Conform
|
|
3
|
+
"description": "Conform helpers for integrating with yup",
|
|
4
4
|
"license": "MIT",
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.5.0",
|
|
6
6
|
"main": "index.js",
|
|
7
7
|
"module": "module/index.js",
|
|
8
8
|
"repository": {
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"url": "https://github.com/edmundhung/conform/issues"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
|
-
"@conform-to/dom": "0.
|
|
17
|
+
"@conform-to/dom": "0.5.0",
|
|
18
18
|
"yup": ">=0.32.0"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|