# reconform

> React higher order components and utilities for easier forms. 📝

Latest version **0.0.54** (published 2018-07-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install reconform
pnpm add reconform
yarn add reconform
bun add reconform
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.54 |
| Published | 2018-07-25 |
| First published | 2018-03-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 22.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Josh Ellis |
| Maintainers | iamjoshellis |
| Keywords | react, forms, form, higher-order-component |

## Links

- npm: https://www.npmjs.com/package/reconform
- Repository: https://github.com/iamjoshellis/reconform
- Homepage: https://github.com/iamjoshellis/reconform#readme
- Issues: https://github.com/iamjoshellis/reconform/issues
- npm.io page: https://npm.io/package/reconform

## 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.0.54 (latest) — 2018-07-25
- 0.0.53 — 2018-07-25
- 0.0.52 — 2018-07-25
- 0.0.51 — 2018-07-23
- 0.0.50 — 2018-07-22
- 0.0.49 — 2018-07-22
- 0.0.48 — 2018-07-22
- 0.0.47 — 2018-07-16
- 0.0.46 — 2018-07-16
- 0.0.44 — 2018-07-02
- 0.0.43 — 2018-06-26
- 0.0.42 — 2018-06-25
- 0.0.41 — 2018-06-25
- 0.0.40 — 2018-06-25
- 0.0.39 — 2018-06-25
- … 37 more at https://npm.io/package/reconform/versions

## README

# Reconform

[![Build Status](https://travis-ci.org/iamjoshellis/reconform.svg?branch=master)](https://travis-ci.org/iamjoshellis/reconform)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
[![npm](https://img.shields.io/npm/v/reconform.svg)](https://www.npmjs.com/package/reconform)

## Higher order component

```js
config: {
  fields: {
    [fieldName: String]: {
      ?name: String // default: fieldName
      ?value: String | Array, // default: ''
      ?message: Node, // default: ''
      ?focused: Boolean, // default: false
      ?touched: Boolean, // default: false
      ?dirty: Boolean, // default: false
      ?valid: Boolean, // default: !Boolean(validator)
      ?validator: (value: String, props: Object) => Boolean | Node, // default: undefined
    }
  },
  submitting: Boolean, // default: false,
  onSubmit: (props: Object) => any // default: undefined
}
```

Usage example:

```js
const enhance = withForm({
  fields: {
    username: {
      validator: (value, props) => value.length > 12 && 'Too Long Amigo',
    }
  }
  onSubmit: async (values, props) => {
    await props.someHandler(values);
    props.resetForm();
  }
});

const Form = enhance(({ fields, submitting, fieldEventHandlers, onSubmit }) =>
  <form onSubmit={onSubmit}>
    <label>
      <span>Username</span>
      <input name={fields.username.name} value={fields.username.value} {...fieldEventHandlers} />
    </label>
    {fields.username.touched && !fields.username.valid && <p>{fields.username.message}</p>}
    <button disabled={submitting}>Submit</button>
  </form>
)
```

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