mirror of
https://github.com/jbranchaud/til
synced 2026-01-10 10:38:01 +00:00
Add Formik's Validation Schema As A Function as a react til
This commit is contained in:
@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
|
|||||||
For a steady stream of TILs from a variety of rocketeers, checkout
|
For a steady stream of TILs from a variety of rocketeers, checkout
|
||||||
[til.hashrocket.com](https://til.hashrocket.com/).
|
[til.hashrocket.com](https://til.hashrocket.com/).
|
||||||
|
|
||||||
_715 TILs and counting..._
|
_716 TILs and counting..._
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -486,6 +486,7 @@ _715 TILs and counting..._
|
|||||||
- [Enforce Specific Values With PropTypes](react/enforce-specific-values-with-proptypes.md)
|
- [Enforce Specific Values With PropTypes](react/enforce-specific-values-with-proptypes.md)
|
||||||
- [Force A Component To Only Have One Child](react/force-a-component-to-only-have-one-child.md)
|
- [Force A Component To Only Have One Child](react/force-a-component-to-only-have-one-child.md)
|
||||||
- [Forcing A Child Remount With The Key Prop](react/forcing-a-child-remount-with-the-key-prop.md)
|
- [Forcing A Child Remount With The Key Prop](react/forcing-a-child-remount-with-the-key-prop.md)
|
||||||
|
- [Formik's Validation Schema As A Function](react/formiks-validation-schema-as-a-function.md)
|
||||||
- [Inactive And Active Component Styles With Radium](react/inactive-and-active-component-styles-with-radium.md)
|
- [Inactive And Active Component Styles With Radium](react/inactive-and-active-component-styles-with-radium.md)
|
||||||
- [Inline Style Attributes Should Be Camel Cased](react/inline-style-attributes-should-be-camel-cased.md)
|
- [Inline Style Attributes Should Be Camel Cased](react/inline-style-attributes-should-be-camel-cased.md)
|
||||||
- [Mapping Over One Or Many Children](react/mapping-over-one-or-many-children.md)
|
- [Mapping Over One Or Many Children](react/mapping-over-one-or-many-children.md)
|
||||||
|
|||||||
48
react/formiks-validation-schema-as-a-function.md
Normal file
48
react/formiks-validation-schema-as-a-function.md
Normal 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.
|
||||||
Reference in New Issue
Block a user