https://github.com/petrenkovitaliy/formik-devtools
Browser extension for debugging Formik state
https://github.com/petrenkovitaliy/formik-devtools
devtools devtools-extension extension-chrome formik
Last synced: 6 months ago
JSON representation
Browser extension for debugging Formik state
- Host: GitHub
- URL: https://github.com/petrenkovitaliy/formik-devtools
- Owner: petrenkoVitaliy
- Created: 2020-10-14T10:31:55.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-05-15T20:05:01.000Z (over 1 year ago)
- Last Synced: 2025-04-03T01:08:12.010Z (7 months ago)
- Topics: devtools, devtools-extension, extension-chrome, formik
- Language: TypeScript
- Homepage:
- Size: 6.26 MB
- Stars: 80
- Watchers: 1
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Formik Devtools
[](https://badge.fury.io/js/formik-devtools-extension)
[](https://img.shields.io/npm/dw/formik-devtools-extension)
## Browser extension for debugging [Formik](https://github.com/formium/formik) state.
## Check Demo [here](https://petrenkovitaliy.github.io/)
## 1. Installation:
### 1.1 install [Chrome extension](https://chrome.google.com/webstore/detail/formik-devtools/dadeefbkfcpaeacnafgceahcpjlfmmjj?hl=en) or [Firefox addon](https://addons.mozilla.org/en-GB/firefox/addon/formik-devtools/)
### 1.2 install package with [npm](https://www.npmjs.com/package/formik-devtools-extension):
```bash
npm i formik-devtools-extension
```
## 2. Quick Start:
### 2.1 inside your component containing `` use:
```tsx
import { withFormikDevtools } from "formik-devtools-extension";
/* ... */
{(formikProps) => {
withFormikDevtools(formikProps);
return
}
```
OR _(both methods are equivalent)_ :
```jsx
// pass props with ReactElements
{(formikProps) =>
withFormikDevtools(formikProps,
)
}
```
### 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.
```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
```