TypeScript

The Formik source code is written in TypeScript, so you can rest easy that Formik's types will always be up-to-date. As a mental model, Formik's type signatures are very similar to React Router 4's <Route>.

Render props (<Formik /> and <Field />)

1 import * as React from 'react';
2 import {
3   Formik,
4   FormikHelpers,
5   FormikProps,
6   Form,
7   Field,
8   FieldProps,
9 } from 'formik';
10 
11 interface MyFormValues {
12   firstName: string;
13 }
14 
15 export const MyApp: React.FC<{}> = () => {
16   const initialValues: MyFormValues = { firstName: '' };
17   return (
18     <div>
19       <h1>My Example</h1>
20       <Formik
21         initialValues={initialValues}
22         onSubmit={(values, actions) => {
23           console.log({ values, actions });
24           alert(JSON.stringify(values, null, 2));
25           actions.setSubmitting(false);
26         }}
27       >
28         <Form>
29           <label htmlFor="firstName">First Name</label>
30           <Field id="firstName" name="firstName" placeholder="First Name" />
31           <button type="submit">Submit</button>
32         </Form>
33       </Formik>
34     </div>
35   );
36 };

withFormik()

1 import React from 'react';
2 import * as Yup from 'yup';
3 import { withFormik, FormikProps, FormikErrors, Form, Field } from 'formik';
4 
5 // Shape of form values
6 interface FormValues {
7   email: string;
8   password: string;
9 }
10 
11 interface OtherProps {
12   message: string;
13 }
14 
15 // Aside: You may see InjectedFormikProps<OtherProps, FormValues> instead of what comes below in older code.. InjectedFormikProps was artifact of when Formik only exported a HoC. It is also less flexible as it MUST wrap all props (it passes them through).
16 const InnerForm = (props: OtherProps & FormikProps<FormValues>) => {
17   const { touched, errors, isSubmitting, message } = props;
18   return (
19     <Form>
20       <h1>{message}</h1>
21       <Field type="email" name="email" />
22       {touched.email && errors.email && <div>{errors.email}</div>}
23 
24       <Field type="password" name="password" />
25       {touched.password && errors.password && <div>{errors.password}</div>}
26 
27       <button type="submit" disabled={isSubmitting}>
28         Submit
29       </button>
30     </Form>
31   );
32 };
33 
34 // The type of props MyForm receives
35 interface MyFormProps {
36   initialEmail?: string;
37   message: string; // if this passed all the way through you might do this or make a union type
38 }
39 
40 // Wrap our form with the withFormik HoC
41 const MyForm = withFormik<MyFormProps, FormValues>({
42   // Transform outer props into form values
43   mapPropsToValues: props => {
44     return {
45       email: props.initialEmail || '',
46       password: '',
47     };
48   },
49 
50   // Add a custom validation function (this can be async too!)
51   validate: (values: FormValues) => {
52     let errors: FormikErrors = {};
53     if (!values.email) {
54       errors.email = 'Required';
55     } else if (!isValidEmail(values.email)) {
56       errors.email = 'Invalid email address';
57     }
58     return errors;
59   },
60 
61   handleSubmit: values => {
62     // do submitting things
63   },
64 })(InnerForm);
65 
66 // Use <MyForm /> wherevs
67 const Basic = () => (
68   <div>
69     <h1>My App</h1>
70     <p>This can be anywhere in your application</p>
71     <MyForm message="Sign up" />
72   </div>
73 );
74 
75 export default Basic;