Repository: jaredpalmer/formik (ts)

Issue:
Uncaught TypeError: (0 , _formik2.default) is not a function
I have been unable to get this to work. I'm importing Formik and exporting it as a HOC to my form component. Am I doing something wrong?

I get the following error:

**Error**
```console
client.bundle.js:18089 Uncaught TypeError: (0 , _formik2.default) is not a function
    at Object.defineProperty.value (client.bundle.js:18089)
    at __webpack_require__ (client.bundle.js:20)
    at Object.defineProperty.value (client.bundle.js:18390)
    at __webpack_require__ (client.bundle.js:20)
    at Object.<anonymous> (client.bundle.js:16873)
    at __webpack_require__ (client.bundle.js:20)
    at Object.defineProperty.value (client.bundle.js:19112)
    at __webpack_require__ (client.bundle.js:20)
    at validateFormat (client.bundle.js:66)
    at client.bundle.js:69
```

**Form.js**
```javascript
import React, { Component } from 'react';
import Formik from 'formik';
import Yup from 'yup';
import Grid from 'client/components/shared/grid';
import Form from 'client/components/shared/form';

class DonationForm extends Component {
  render() {
    const { values = {} } = this.props;
    return (
      <form>
        <Grid width="50" mobile="100">
          <Form.Input
            label="First Name"
            value={values.first_name}
          />
        </Grid>
        <Grid width="50" mobile="100">
          <Form.Input
            label="Last Name"
            value={values.last_name}
          />
        </Grid>
        <Grid width="50" mobile="100">
          <Form.Input
            label="Email Address"
            value={values.email_address}
          />
        </Grid>
        <Grid width="50" mobile="100">
          <Form.Input
            label="Phone Number"
            value={values.phone_number}
          />
        </Grid>
      </form>
    );
  }
}

const validationSchema = Yup.object().shape({
  first_name: Yup.string().required(),
  last_name: Yup.string().required(),
  email_address: Yup.string().email().required(),
  phone_number: Yup.string().required()
});
export default Formik({ validationSchema })(DonationForm);
```

Pull request:
Fix #12. Use named exports
This fixes a bug for non-TypeScript users with importing from a module that exports both named and `default` exports. Unfortunately, it looks like the only solution is to switch to 
`import { Formik } from 'formik';`

Patch:
diff --git a/README.md b/README.md
index 703a8bc..db2027c 100644
--- a/README.md
+++ b/README.md
@@ -85,7 +85,7 @@ import EditUserForm from './EditUserForm';
 
 const EditUserDialog = ({ user }) =>
   <Dialog>
-  	<EditUserForm user={user} />
+    <EditUserForm user={user} />
   </Dialog>;
 ```
 
@@ -94,7 +94,7 @@ Enter Formik.
 ```js
 // EditUserForm.js
 import React from 'react';
-import Formik from 'formik';
+import { Formik } from 'formik';
 import Yup from 'yup';
 
 // Formik is a Higher Order Component that wraps a React Form. Mutable form values 
diff --git a/example/Form.tsx b/example/Form.tsx
index 4906727..76db326 100644
--- a/example/Form.tsx
+++ b/example/Form.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as yup from 'yup';
 
-import Formik, { FormikBag, InjectedFormikProps } from 'formik';
+import { Formik, FormikBag, InjectedFormikProps } from 'formik';
 
 export interface Props {
   email: string;
diff --git a/src/index.tsx b/src/index.tsx
index 65ffd14..36e4277 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -32,9 +32,8 @@ export function validateFormData<T>(data: T, schema: any): Promise<void> {
   for (let k in data) {
     if (data.hasOwnProperty(k)) {
       const key = String(k);
-      validateData[key] = (data as any)[key] !== ''
-        ? (data as any)[key]
-        : undefined;
+      validateData[key] =
+        (data as any)[key] !== '' ? (data as any)[key] : undefined;
     }
   }
   return schema.validate(validateData, { abortEarly: false });
@@ -147,7 +146,7 @@ export interface InferableComponentDecorator<TOwnProps> {
   <T extends CompositeComponent<TOwnProps>>(component: T): T;
 }
 
-export default function formik<Props, Values extends FormikValues, Payload>({
+export function Formik<Props, Values extends FormikValues, Payload>({
   displayName,
   mapPropsToValues = vanillaProps => {
     let values: Values = {} as Values;
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
deleted file mode 100644
index 1cbeef9..0000000
--- a/src/types/index.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-declare module 'yup' {
-
-}
-
-declare module 'hoist-non-react-statics' {
-  /**
-   * Copies any static properties present on `source` to `target`, excluding those that are specific
-   * to React.
-   *
-   * Returns the target component.
-   */
-  function hoistNonReactStatics(
-    targetComponent: any,
-    sourceComponent: any,
-    customStatics: { [name: string]: boolean }
-  ): any;
-  namespace hoistNonReactStatics {
-
-  }
-  export = hoistNonReactStatics;
-}


Test patch:
diff --git a/src/__tests__/Formik.test.tsx b/src/__tests__/Formik.test.tsx
index f2ee3c0..6c1c4ae 100644
--- a/src/__tests__/Formik.test.tsx
+++ b/src/__tests__/Formik.test.tsx
@@ -1,13 +1,15 @@
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
 
-import Formik, { InjectedFormikProps } from '../.';
+import { Formik, InjectedFormikProps } from '../.';
 
 import Yup from 'yup';
 
 describe('Formik', () => {
   it('renders Formik correctly', () => {
-    interface Props { thing: string }
+    interface Props {
+      thing: string;
+    }
     const Form: React.SFC<InjectedFormikProps<Props, Props>> = ({
       values,
       handleSubmit,
@@ -22,7 +24,10 @@ describe('Formik', () => {
             value={values.thing}
             name="thing"
           />
-          {errors.thing && <div>{errors.thing}</div>}
+          {errors.thing &&
+            <div>
+              {errors.thing}
+            </div>}
           <input type="submit" value="Submit" />
         </form>
       );
@@ -44,8 +49,12 @@ describe('Formik', () => {
   });
 
   it('mapsPropsToValues', () => {
-    interface Props { hello: string }
-    interface Values { thing: string }
+    interface Props {
+      hello: string;
+    }
+    interface Values {
+      thing: string;
+    }
 
     const Form: React.SFC<InjectedFormikProps<Props, Values>> = ({
       values,
@@ -61,7 +70,10 @@ describe('Formik', () => {
             value={values.thing}
             name="thing"
           />
-          {errors.thing && <div>{errors.thing}</div>}
+          {errors.thing &&
+            <div>
+              {errors.thing}
+            </div>}
           <input type="submit" value="Submit" />
         </form>
       );