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";

/* ... */

<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>

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