petrenkovitaliy/formik-devtools

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

formik-devtools's Issues

Name length of tab

Hello, I recently integrated this into a project I'm working on, and I think it's fantastic. Thank you for building this tool! I would like to make a suggestion and can provide a PR if acceptable, but given the number of tabs between what comes with devtools and the react devtools tabs, I think this extension could reduce the panel tab name from "Formik Devtools" to simply "Formik".

Let me know if this seems like a reasonable suggestion and I can get on a PR for this change. Thanks!

Loading instructions

When loading this in a SSR app, I had issues getting it to load at the right time, and wanted to make sure it doesn't load in production so, I was thinking I would share my solution here, and if acceptable share this in the README for usage as an option for other users. Thanks

import { FormikProps } from 'formik'

export const loadFormikDevtools = (formikProps: FormikProps<any>): void => {
  if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
    require('formik-devtools-extension').withFormikDevtools(formikProps)
  }
}

Chrome Web Store version mismatches latest release version here on GitHub

Our engineering team noticed a version bump for the Formik Devtools extension in the Chrome Web Store (to 0.3.1). But, the latest release cut here on GitHub is 0.3.0.

As you can imagine, this caused a flurry of speculation and activity on our end as we tried to discover the cause of the version bump mismatch. Can you shed any light on the matter? What changed, exactly? And why hasn't GitHub been updated in concert? Is this extension still actively maintained, or should we consider alternatives?

We appreciate your time and attention to this matter!

The Chrome Web Store Link 404s

Not sure if this is because of an issue with the web store or if the extension was purposely removed.

Link: https://chrome.google.com/webstore/detail/dadeefbkfcpaeacnafgceahcpjlfmmjj

Firefox addon 404

I'm getting a 404 from the Firefox Addon link in the readme:

https://addons.mozilla.org/en-GB/firefox/addon/formik-devtools/

Support using without browser extension

This library seems to already require being explicitly included in a site in order to use it to inspect formik forms. So the browser extension seems unnecessary given the demo page already shows it being used without the browser extension.

I'd much rather create a button to open it in the corner, react-query devtools style.

Can I use it with nextjs?

Thanks for making such a great extension.
I am developing using next.js and formik.
However, when calling 'withFormikDevtools' following error occurrs.

error - ReferenceError: window is not defined

I Think, The extendedWindow assignment statement seems to be the problem.

var extendedWindow = window;
var FormikDevtools = function () {

So I changed it to do client side rendering with next/dynamic.

I tried to make a pull request, but it was rejected.
so i forked this repository, and fix it.

https://github.com/phaethon5882/formik-devtools