formik-devtools

KO | EN

gitlite — search

#hacktoberfest #react #ai #golang #android #machine-learning #deep-learning #linux #windows #awesome-list #vue #security #pytorch #openai

formik-devtools

(★ 80)

Browser extension for debugging Formik state

파일 탐색기

최종 버전 다운로드 (.zip)

- - screen.png
- 1280.png
- 1400.png
- 440.png
- icon.png
- .gitignore
- index.js
- index.ts
- package-lock.json
- package.json
- README.md
- tsconfig-cjs.json
- tsconfig.json
- - arrow-down.png
  - arrow-right.png
- - background.js
  - content.js
  - devtools.js
  - war.js
- 128.png
- 16.png
- 48.png
- devtools.html
- favicon.ico
- index.html
- manifest.json
- robots.txt
- - messagesMock.ts
- - browser.ts
- - index.ts
- - FormikDevtools.tsx
  - index.ts
  - style.module.scss
- - index.tsx
- - renderValue.tsx
  - utils.tsx
  - validate.tsx
- - useMessageLoad.ts
- - formikState.ts
  - message.ts
  - values.ts
- - changesParsers.ts
  - parseHelpers.ts
  - valuesParsers.ts
- - colorVariables.scss
  - resetStyles.scss
- - messageValidation.ts
- index.tsx
- react-app-env.d.ts
.eslintrc.js
.gitignore
.prettierrc.js
package-lock.json
package.json
README.md
tsconfig.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Formik Devtools

[![npm version](https://badge.fury.io/js/formik-devtools-extension.svg)](https://badge.fury.io/js/formik-devtools-extension)
[![downloads](https://img.shields.io/npm/dw/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 `<Formik/>` use:

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

/* ... */

<Formik>
    {(formikProps) => {
        withFormikDevtools(formikProps);
        return <input type="file"  {/* ... */}/>
    }
</Formik>
```

OR _(both methods are equivalent)_ :

```jsx
// 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.

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

formik-devtools

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

formik-devtools

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README