diff --git a/README.md b/README.md index 209c811..fc8740e 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/). For a steady stream of TILs from a variety of rocketeers, checkout [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) - [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) +- [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) - [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) diff --git a/react/formiks-validation-schema-as-a-function.md b/react/formiks-validation-schema-as-a-function.md new file mode 100644 index 0000000..f9ceb85 --- /dev/null +++ b/react/formiks-validation-schema-as-a-function.md @@ -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.