formik-devtools-extension
v0.1.8
Published
Formik Developer Tools for debugging React form components
Downloads
15,379
Readme
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