Expose formikbag as imperative methods

packages/formik/src/Formik.tsx

@@ -328,21 +328,21 @@ export function useFormik<Values extends FormikValues = FormikValues>({
     (values: Values = state.values) => {
       return unstable_runWithPriority(LowPriority, () => {
         return runAllValidations(values)
-        .then(combinedErrors => {
-          if (!!isMounted.current) {
-            dispatch({ type: 'SET_ERRORS', payload: combinedErrors });
-          }
-          return combinedErrors;
-        })
-        .catch(actualException => {
-          if (process.env.NODE_ENV !== 'production') {
-            // Users can throw during validate, however they have no way of handling their error on touch / blur. In low priority, we need to handle it
-            console.warn(
-              `Warning: An unhandled error was caught during low priority validation in <Formik validate />`,
-              actualException
-            );
-          }
-        });
+          .then(combinedErrors => {
+            if (!!isMounted.current) {
+              dispatch({ type: 'SET_ERRORS', payload: combinedErrors });
+            }
+            return combinedErrors;
+          })
+          .catch(actualException => {
+            if (process.env.NODE_ENV !== 'production') {
+              // Users can throw during validate, however they have no way of handling their error on touch / blur. In low priority, we need to handle it
+              console.warn(
+                `Warning: An unhandled error was caught during low priority validation in <Formik validate />`,
+                actualException
+              );
+            }
+          });
       });
     }
   );
@@ -652,7 +652,7 @@ export function useFormik<Values extends FormikValues = FormikValues>({
       } else {
         executeChange(eventOrPath);
       }
-    },
+    }
   );
 
   const setFieldTouched = useEventCallback(
@@ -693,15 +693,15 @@ export function useFormik<Values extends FormikValues = FormikValues>({
     [setFieldTouched]
   );
 
-  const handleBlur = useEventCallback(
-    (eventOrString: any): void | ((e: any) => void) => {
-      if (isString(eventOrString)) {
-        return event => executeBlur(event, eventOrString);
-      } else {
-        executeBlur(eventOrString);
-      }
-    },
-  );
+  const handleBlur = useEventCallback((eventOrString: any):
+    | void
+    | ((e: any) => void) => {
+    if (isString(eventOrString)) {
+      return event => executeBlur(event, eventOrString);
+    } else {
+      executeBlur(eventOrString);
+    }
+  });
 
   const setFormikState = React.useCallback(
     (
@@ -988,7 +988,11 @@ export function Formik<
   ExtraProps = {}
 >(props: FormikConfig<Values> & ExtraProps) {
   const formikbag = useFormik<Values>(props);
-  const { component, children, render } = props;
+  const { component, children, render, innerRef } = props;
+
+  // This allows folks to pass a ref to <Formik />
+  React.useImperativeHandle(innerRef, () => formikbag);
+
   React.useEffect(() => {
     if (__DEV__) {
       invariant(
@@ -1138,9 +1142,9 @@ function getValueForCheckbox(
   }
 
   // If the currentValue was not a boolean we want to return an array
-  let currentArrayOfValues = []
-  let isValueInArray = false
-  let index = -1
+  let currentArrayOfValues = [];
+  let isValueInArray = false;
+  let index = -1;
 
   if (!Array.isArray(currentValue)) {
     // eslint-disable-next-line eqeqeq
@@ -1149,24 +1153,25 @@ function getValueForCheckbox(
     }
   } else {
     // If the current value is already an array, use it
-    currentArrayOfValues = currentValue
+    currentArrayOfValues = currentValue;
     index = currentValue.indexOf(valueProp);
     isValueInArray = index >= 0;
   }
 
-
   // If the checkbox was checked and the value is not already present in the aray we want to add the new value to the array of values
   if (checked && valueProp && !isValueInArray) {
     return currentArrayOfValues.concat(valueProp);
   }
 
   // If the checkbox was unchecked and the value is not in the array, simply return the already existing array of values
   if (!isValueInArray) {
-    return currentArrayOfValues
+    return currentArrayOfValues;
   }
 
   // If the checkbox was unchecked and the value is in the array, remove the value and return the array
-  return currentArrayOfValues.slice(0, index).concat(currentArrayOfValues.slice(index + 1));
+  return currentArrayOfValues
+    .slice(0, index)
+    .concat(currentArrayOfValues.slice(index + 1));
 }
 
 // React currently throws a warning when using useLayoutEffect on the server.

packages/formik/src/types.tsx

@@ -216,6 +216,9 @@ export interface FormikConfig<Values> extends FormikSharedConfig {
    * throws an error object where that object keys map to corresponding value.
    */
   validate?: (values: Values) => void | object | Promise<FormikErrors<Values>>;
+
+  /** Inner ref */
+  innerRef?: (instance: any) => void;
 }
 
 /**

packages/formik/test/Formik.test.tsx

@@ -1288,4 +1288,12 @@ describe('<Formik>', () => {
       getProps().validateForm();
     }).toThrow('broken validations');
   });
+
+  it('exposes formikbag as imperative methods', () => {
+    const innerRef: any = React.createRef();
+
+    const { getProps } = renderFormik({ innerRef });
+
+    expect(innerRef.current).toEqual(getProps());
+  });
 });