Formik Devtools

Browser extension for debugging Formik state.

Check Demo here

1. Installation:

1.1 install Chrome extension or Firefox addon

1.2 install package with npm:

npm i formik-devtools-extension

2. Quick Start:

2.1 inside your component containing <Formik/> use:

import { withFormikDevtools } from "formik-devtools-extension";

/* ... */

// pass just props
<Formik>
    {(formikProps) => {
        withFormikDevtools(formikProps);
        return <input type="file"  {/* ... */}/>
    }
</Formik>

OR (both methods are equivalent) :

// pass props with ReactElements

<Formik>
    {(formikProps) =>
        withFormikDevtools(formikProps,
        <div>
            <input type="file"  {/* ... */}/>
        </div>)
    }
</Formik>

you can also use it in functional components

import { useFormik } from 'formik';
import { withFormikDevtools } from 'formik-devtools-extension';

export const FunctionalComponent = () => {
    // initializing a form with a hook
    const formikForm = useFormik({
        initialValues: {
            firstFormValue: '',
            secondFormValue: {},
        },
        onSubmit,
    });

    // call it at each render
    withFormikDevtools(formikForm);


    return (
        // ..your form implementation
    )
}

2.2 open page you want to monitor in browser

2.3 open browser devtools (F12) with "Formik tab"

3. API:

• withFormikDevtools passes Formik props on every update and sends values to extension.

withFormikDevtools(formikProps: FormikProps, children?: any): children | undefined

• If you have more than one Formik component, you should name them. getFormikDevtools returns withFormikDevtools entity with binded name.

getFormikDevtools(formName: string): withFormikDevtools