🚀 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>
</>
)
}
@prichodko @jaredpalmer
Today we can import
FormikProvider
from “public”FormikContext
module.Is it safe to use provider in this fashion?