Formik Form Snippet

README.md

@@ -13,6 +13,7 @@ The following projects are "internal open source" at Launchpad. That means that
 Project | Language | Visibility | Description
 --- | --- | --- | ---
 [Client Template](https://github.com/LaunchPadLab/client-template) | JS, React, Redux | Private | Template app for React/Redux SPAs.
+[Ionic Client Template](https://github.com/LaunchPadLab/ionic-client-template) | JS, React, Redux, Ionic | Private | Template app for Ionic-based React/Redux SPAs.
 [Decanter](https://github.com/LaunchPadLab/decanter) | Ruby, Rails | Public | Gem that makes it easy to transform incoming data before it hits the controller action or model.
 [Flight Readiness Review](https://github.com/LaunchPadLab/flight_readiness_review) | Bash | Private | Utility to set up a macOS laptop for design and development at LaunchPad Lab.
 [Fuel](https://github.com/LaunchPadLab/fuel) (no longer maintained) | Ruby, Rails | Public | Stop developing Rails blogs and start writing your actual blog posts with this dead simple blogging engine for Rails.
@@ -36,6 +37,6 @@ Project | Language | Visibility | Description
 
 ## Gists
 
-One function of Opex is to set standard processes by which we do our work. These processes are documented in the [gists](gists) folder of this repository. 
+One function of Opex is to set standard processes by which we do our work. These processes are documented in the [gists](gists) folder of this repository.
 
 These documents are fairly limited in scope, and there are few of them by design. This prevents information overload and encourages us to encapsulate as many of our best practices as possible in our app template repositories. Still, they may come in handy as a general reference / anti-[bikeshedding](https://css-tricks.com/what-is-bikeshedding) tool.

gists/snippets/react.md

@@ -117,6 +117,52 @@ Copy the following into your `javascript.json` snippet file:
 			")(${1:MyFormComponent})"
 		],
 		"description": "LP-Form enhanced Redux-Form form component"
+	},
+
+	"React Formik Component": {
+		"prefix": "reactFormikComponent",
+		"body": [
+			"import React from 'react'",
+			"import PropTypes from 'prop-types'",
+			"import { Formik, Form } from 'formik'",
+			"import * as Yup from 'yup'",
+			"import { SubmitButton } from 'lp-components'",
+			"",
+			"const propTypes = {",
+			"\thandleSubmit: PropTypes.func.isRequired,",
+			"}",
+			"const defaultProps = {}",
+			"",
+			"const BASE_INITIAL_VALUES = {",
+			"}",
+			"const VALIDATION_SCHEMA = Yup.object({",
+			"})",
+			"",
+			"function ${1:MyFormComponent} ({ handleSubmit }) {",
+			"\treturn (",
+			"\t\t<Formik",
+			"\t\t\tinitialValues={BASE_INITIAL_VALUES}",
+			"\t\t\tvalidationSchema={VALIDATION_SCHEMA}",
+			"\t\t\tonSubmit={handleSubmit}",
+			"\t\t>",
+			"\t\t\t{({ isSubmitting }) => (",
+			"\t\t\t\t<Form>",
+			"\t\t\t\t\t$0",
+			"\t\t\t\t\t<SubmitButton submitting={isSubmitting}>",
+			"\t\t\t\t\t\tSubmit",
+			"\t\t\t\t\t</SubmitButton>",
+			"\t\t\t\t</Form>",
+			"\t\t\t)}",
+			"\t\t</Formik>",
+			"\t)",
+			"}",
+			"",
+			"${1:MyFormComponent}.propTypes = propTypes",
+			"${1:MyFormComponent}.defaultProps = defaultProps",
+			"",
+			"export default ${1:MyFormComponent}",
+		],
+		"description": "Formik-based form component"
 	}
 }
 ```