Export FormikProvdier

🚀 Feature request

Current Behavior

When we use useFormik instead of <Formik>, we cannot use <Field>s and other stuff inside the component, since there is no Formik Context.

Desired Behavior

Ability to use <Field>s and other context-related stuff without <Formik>

Suggested Solution

Just add one line exporting FormikProvider into the file https://github.com/jaredpalmer/formik/blob/master/packages/formik/src/index.tsx

Who does this impact? Who is this for?

This thing will help folks to use <Formik> exposed stuff (like submitForm()) from outside the form.
This would be especially useful if you want to expose imperative handle with submitForm() function from the component.

Here is the result I would like to achieve:

const MyForm = () => {
  const formik = useFormik()
  useImperativeHandle(ref, () => ({
     // that's for ability to submit from outside the component
     submit: formik.submitForm
  }))
  return (
    <>
      <button onClick={formik.submitForm()}>Submit from outside the form</button>
      <FormikProvider value={formik}>
        { /* all the regular stuff including <Field> */  }
      </FormikProvider>
    </>
  )
}

Describe alternatives you’ve considered

Currently to expose the submitForm outside you can do the following.
(But it’s not cool to useImperativeHandle inside the callback, so it will also require some additional logic with useState to push the actual value of submitForm to the root level of the component function).

const MyForm = () => {
  const formik = useFormik()
  return (
    <>
      <button onClick={formik.submitForm()}>Submit from outside the form</button>
      <Formik>
        {
          ({ submitForm })=> {
            useImperativeHandle(ref, () => ({
              // that's for ability to submit from outside the component
              submit: submitForm
            }))
            return (
               /* all the regular stuff including <Field> */
            )
          }
        }
      </Formik>
    </>
  )
}

Additional context

1 possible answer(s) on “Export FormikProvdier