Formik Devtools


Browser extension for debugging Formik state.

Check Demo here

1. Installation:

$3

$3

``bash
npm i formik-devtools-extension
`

2. Quick Start:

$3

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

/ ... /

// pass just props

{(formikProps) => {
withFormikDevtools(formikProps);
return ... /}/>
}

`

OR _(both methods are equivalent)_ :

`jsx
// pass props with ReactElements


{(formikProps) =>
withFormikDevtools(formikProps,


)
}

`

you can also use it in functional components

`jsx
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
)
}

`

$3

$3

3. API:

- _withFormikDevtools_ passes Formik props on every update and sends values to extension.

`ts
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.

`ts
getFormikDevtools(formName: string): withFormikDevtools
``