# formik-util

> Utilities for formik

Latest version **0.7.0** (published 2021-06-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install formik-util
pnpm add formik-util
yarn add formik-util
bun add formik-util
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.0 |
| Published | 2021-06-09 |
| First published | 2019-02-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 22.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | mescoda |
| Maintainers | mescoda |
| Keywords | react, formik |

## Links

- npm: https://www.npmjs.com/package/formik-util
- Repository: https://github.com/mescoda/formik-util
- Homepage: https://github.com/mescoda/formik-util#readme
- Issues: https://github.com/mescoda/formik-util/issues
- npm.io page: https://npm.io/package/formik-util

## Dependencies (1)

- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.3.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.7.0 (latest) — 2021-06-09
- 0.6.0 — 2020-08-27
- 0.5.1 — 2020-08-03
- 0.5.0 — 2020-06-16
- 0.4.0 — 2020-03-14
- 0.3.1 — 2019-12-13
- 0.2.0 — 2019-03-21
- 0.1.0 — 2019-02-19
- 0.0.2 — 2019-02-19
- 0.0.1 — 2019-02-19

## README

# formik-util

Utilities for formik

## Installation

`npm i -S formik-util`

## Usage

### `withFormikUtil`

Formik does not have a flexible method to validate all form fields as well as set all fields touched in order to present errors correctly.

The only way as far as I know is using [`submitForm`](https://jaredpalmer.com/formik/docs/api/formik#submitform-void), however except `submitForm`, you also need [`onSubmit`](https://jaredpalmer.com/formik/docs/api/formik#onsubmit-values-values-formikbag-formikbag-void) to trigger the real submit handler. This maybe acceptable in simple cases, but imagine a filter form with both submit button to query and download button to save results.

With the help of `withFormikUtil`, you can use the injected `validateFormAndTouchAll` method to accomplish that without tears.

```js

import React from 'react';

import {
    withFormik,
    Field
} from 'formik';

import {
    withFormikUtil
} from 'formik-util';

const UI = class extends React.PureComponent {

    onClickSubmit = () => {
        this.props.validateFormAndTouchAll().then(values => {
            // submit(values);
        });
    }

    onClickDownload = () => {
        this.props.validateFormAndTouchAll().then(values => {
            // download(values);
        });
    }

    render() {
        return (
            <form>
                <Field
                    {...{
                        // ...
                    }}
                />
                <button
                    onClick={this.onClickSubmit}
                >
                    Submit
                </button>
                <button
                    onClick={this.onClickDownload}
                >
                    Download
                </button>
            </form>
        );
    }
};

withFormik({
    mapPropsToValues: () => {
        return {};
    }
})(
    withFormikUtil(UI)
);

```

Full injected method list:
- setAllTouched
- triggerValidateForm
- validateFormAndTouchAll
- validateFieldAndTouch


### `withFormikItem`

Add `error` `value` `touch` `onChange` `onBlur` props depend on `name` prop setted on `Formik.Field` to simplify `Formik.Field` declaration.

```js

import React from 'react';

import {
    Field,
    withFormik
} from 'formik';

import {
    withFormikItem
} from 'formik-util';

import {
    Form,
    Select
} from 'antd';


const SelectItem = props => {
    return (
        const optionList = props.dataSource.map(item => {
            return (
                <Select.Option
                    key={item.key}
                    value={item.value}
                >
                    {item.text}
                </Select.Option>
            );
        });

        return (
            <Form.Item
                {...{
                    validateStatus: props.error && props.touch ? 'error' : '',
                    help: props.touch ? props.error : '',
                    ...props
                }}
            >
                <Select
                    {...{
                        ...props
                    }}
                >
                    {optionList}
                </Select>
            </Form.Item>
        );
    );
};

const SelectFormikItem = withFormikItem(SelectItem);

const UI = props => {
    return (
        <div>
            <Field
                {...{
                    component: SelectFormikItem,
                    dataSource: userIDDataSource,
                    name: 'userID',
                    validate: value => {
                        return value === '' ? 'Required' : '';
                    }
                }}
            />
        </div>
    );
};

withFormik({})(UI);

```

---
_Source: https://npm.io/package/formik-util · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._