Skip to content

Instantly share code, notes, and snippets.

@jaredpalmer
Last active July 27, 2019 15:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jaredpalmer/53de022e3e552f07c40e867eee1f7c6e to your computer and use it in GitHub Desktop.
Save jaredpalmer/53de022e3e552f07c40e867eee1f7c6e to your computer and use it in GitHub Desktop.
import React from 'react'
import { Formik, Field, Form } from 'formik'
const MyInput = ({ field, form, ...rest }) =>
<div>
<input {...field} {...rest} />
{form.errors[field.name]
&& form.touched[field.name]
&& <div>{form.errors[field.name]}</div>}
</div>
const App = () =>
<div>
<h1>My Login Form</h1>
<p>This can be anywhere in your application</p>
<Formik
initialValues={{ email: '', password: '', favorite: 'Kirk' }}
validate={values => { /* omitted for brevity */ }}
onSubmit={values => { /* omitted for brevity */ }}
render={({ isSubmitting }) =>
<Form className="whatevs">
<Field component={MyInput} name="email" type="email" />
<Field component={MyInput} name="password" type="password" />
<button type="submit" disabled={isSubmitting}>Submit</button>
</Form>}
/>
</div>
export default App
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment