API Reference
useFormikContext()
useFormikContext() is a custom React hook that will return all Formik state and helpers via React Context.
Example
Here's an example of a form that works similarly to Stripe's 2-factor verification form. As soon as you type a 6 digit number, the form will automatically submit (i.e. no enter keypress is needed).
import React from 'react';
import { useFormikContext, Formik, Form, Field } from 'formik';
const AutoSubmitToken = () => {
// Grab values and submitForm from context
const { values, submitForm } = useFormikContext();
React.useEffect(() => {
// Submit the form imperatively as an effect as soon as form values.token are 6 digits long
if (values.token.length === 6) {
submitForm();
}
}, [values, submitForm]);
return null;
};
const TwoFactorVerificationForm = () => (
<div>
<h1>2-step Verification</h1>
<p>Please enter the 6 digit code sent to your device</p>
<Formik
initialValues={{ token: '' }}
validate={values => {
const errors = {};
if (values.token.length < 5) {
errors.token = 'Invalid code. Too short.';
}
return errors;
}}
onSubmit={(values, actions) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
actions.setSubmitting(false);
}, 1000);
}}
>
<Form>
<Field name="token" type="tel" />
<AutoSubmitToken />
</Form>
</Formik>
</div>
);Reference
useFormikContext(): FormikProps<Values>
A custom React Hook that returns Formik states and helpers via React Context. Thus, this hook will only work if there is a parent Formik React Context from which it can pull from. If called without a parent context (i.e. a descendent of a <Formik> component or withFormik higher-order component), you will get a warning in your console.