1
0
mirror of https://github.com/jbranchaud/til synced 2026-01-03 23:28:02 +00:00

Add Formik's Validation Schema As A Function as a react til

This commit is contained in:
jbranchaud
2018-10-25 16:17:38 -05:00
parent 55026b6106
commit a20e287e2e
2 changed files with 50 additions and 1 deletions

View File

@@ -0,0 +1,48 @@
# Formik's Validation Schema As A Function
The most straightforward way to use
[Formik](https://jaredpalmer.com/formik)'s `validationSchema` is to provide
it with a [Yup](https://github.com/jquense/yup) object defining your form's
validations.
```javascript
const MyComponent = withFormik({
// ...
validationSchema: yup.object().shape({
email: yup.string().required(),
feedback: yup.string().required(),
}),
// ...
})(MyForm);
```
There may be a point at which you need access to the `props` being passed
to `MyComponent` in order to construct the proper set of validations.
Formik supports this by allowing `validationSchema` to be a function.
```javascript
const MyComponent = withFormik({
// ...
validationSchema: (props) => {
let emailSchema;
if(props.allowAnonymous) {
emailSchema = yup.string();
} else {
emailSchema = yup.string().required();
}
return yup.object().shape({
email: emailSchema,
feedback: yup.string().required(),
});
},
// ...
})(MyForm);
```
When `validationSchema` is a function, its first argument is the set of
props passed to that component.