# zenform

> react form management made easy

Latest version **0.0.0-rc.3** (published 2019-01-10) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.0-rc.3 |
| Published | 2019-01-10 |
| First published | 2018-02-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 268.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Shriyans Bhatnagar |
| Maintainers | shriyans |
| Keywords | form, react, react form |

## Links

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

## Dependencies (4)

- [ramda](https://npm.io/package/ramda.md) ^0.25.0
- [warning](https://npm.io/package/warning.md) ^3.0.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.1
- [create-react-context](https://npm.io/package/create-react-context.md) ^0.2.1

## 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.0-rc.3 (latest) — 2019-01-10
- 0.0.0-rc.2 — 2018-12-18
- 0.0.0-rc.1 — 2018-12-18
- 0.0.0-beta.10 — 2018-11-26
- 0.0.0-beta.9 — 2018-04-10
- 0.0.0-beta.8 — 2018-04-05
- 0.0.0-beta.7 — 2018-04-05
- 0.0.0-beta.6 — 2018-04-04
- 0.0.0-beta.5 — 2018-04-04
- 0.0.0-beta.4 — 2018-04-04
- 0.0.0-beta.3 — 2018-04-02
- 0.0.0-beta.2 — 2018-04-01
- 0.0.0-beta.1 — 2018-04-01
- 0.0.0-beta.0 — 2018-04-01
- 0.0.0-alpha.7 — 2018-03-30
- … 6 more at https://npm.io/package/zenform/versions

## README

![logo](https://user-images.githubusercontent.com/4706261/38170869-6f2aa9f0-35ac-11e8-8c2d-d54fce419e75.png)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](https://standardjs.com)
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg?style=flat-square)](https://opensource.org/licenses/MIT)
[![ComVer](https://img.shields.io/badge/ComVer-compliant-brightgreen.svg?style=flat-square)](https://github.com/staltz/comver)
[![npm](https://img.shields.io/npm/v/zenform.svg?style=flat-square)](https://www.npmjs.com/package/zenform)
[![module formats: umd, cjs, and es](https://img.shields.io/badge/module%20formats-umd%2c%20cjs%2c%20es-green.svg?style=flat-square)](https://unpkg.com/zenform/dist/)
[![size](http://img.badgesize.io/https://unpkg.com/zenform/dist/umd/index.min.js?label=size&style=flat-square)](https://unpkg.com/zenform/dist/)
[![gzip size](http://img.badgesize.io/https://unpkg.com/zenform/dist/umd/index.min.js?compression=gzip&label=gzip%20size&style=flat-square)](https://unpkg.com/zenform/dist/)

<!-- toc -->

* [Installation](#installation)
* [Api](#api)
  * [Form](#form)
    * [Form Props](#form-props)
    * [Form Render Props](#form-render-props)
  * [Field](#field)
    * [Field Props](#field-props)
    * [Field Render Prop](#field-render-prop)
  * [Field Array](#field-array)
    * [Field Array Props](#field-array-props)
    * [Field Array Render Prop](#field-array-render-prop)
  * [Field Observer](#field-observer)
    * [Field Observer Props](#field-observer-props)
  * [Form Observer](#form-observer)
    * [Form Observer Props](#form-observer-props)
* [Acknowledgment](#acknowledgment)
* [License](#license)

<!-- tocstop -->

## Installation

* npm

  ```sh
    npm i -S zenform
  ```

* yarn
  ```sh
    yarn add zenform
  ```

## Api

zenform has 2 core components

* [Form](#form)
* [Field](#field)

and a few helper components

* [FieldArray](#field-array)
* [FieldObserver](#field-observer)
* [FormObserver](#form-observer)

### Form

Form is top most component, all other components should be its child.

#### Form Props

* `onSubmit: ({ values: Object, changeSet: Object, formActions: FormActions }) => void`
* `initialValues?: Object`
* `validations?: (values: Object) => void | Object | Promise<*>`
* `validateOnChange?: boolean`
* `validateOnBlur?: boolean`

To render the form , it takes either a function as **render** prop or **child as a function**.  
This function will have form render props as arguments.

#### Form Render Props

* `values: Object`
* `handleSubmit: (event?: SyntheticEvent<HTMLFormElement>) => void`
* `resetForm: () => void`
* `errors: Object`
* `touched: Object`
* `data: Object`
* `activeField: string`
* `isDirty: boolean`
* `isInvalid: boolean`
* `initialValues: Object`
* `setFieldValue: (field: string, value: any) => void`
* `setMultipleFieldValues: (fieldValues: Array<{field: string, value: any}>) => void`
* `setFieldError: (field: string, error: any) => void`
* `setMultipleFieldErrors: (fieldErrors: Array<{field: string, error: any}>) => void`
* `setFieldTouched: (field: string, isTouched: boolean) => void`
* `setMultipleFieldTouched: (fieldTouched: Array<{field: string, isTouched: boolean}>) => void`
* `setFieldData: (field: string, data: any) => void`
* `setMultipleFieldData: (fieldData: Array<{field: string, data: any}>) => void`
* `setActiveField: (field: string) => void`

---

### Field

Field is the actual input component, it should always be a child of Form component.

#### Field Props

* `name: string`
* `format?: (value: any) => any`
* `parse?: (value: any) => any`
* `allowNull?: boolean`
* `value?: any`

To render the field , it takes either a component (string or react component) or a function as **render** prop or **child as a function**.  
This function will have field render props as arguments.

#### Field Render Prop

* `input: Object`

  * `name: string`
  * `value: any`
  * `onChange: (Event<*>) => void`
  * `onBlur: (Event<*>) => void`
  * `onFocus: (Event<*>) => void`

* `meta: Object`
  * `error: any`
  * `data: any`
  * `isActive: boolean`
  * `isTouched: boolean`

---

### Field Array

Array Field is a helper component for using multiple array input.

#### Field Array Props

* `name: string`

To render the field array, it takes either a function as **render** prop or **child as a function**.  
This function will have field array render props as arguments.

#### Field Array Render Prop

* `fields: Object`
  * `name: string,`
  * `arrayValues: any[]`
  * `forEach: (iterator: (name: string, index: number) => void) => void`
  * `insert: (index: number, value: any) => void`
  * `map: (iterator: (name: string, index: number) => any) => any[]`
  * `move: (from: number, to: number) => void`
  * `pop: () => void`
  * `push: (value: any) => void`
  * `remove: (index: number) => void`
  * `replace: (index: number, value: any) => void`
  * `swap: (indexA: number, indexB: number) => void`
  * `unshift: (value: any) => number`

---

### Field Observer

A FieldObserver component observes a given field and provides functions to access `onChange`, `onBlur` and `onFocus` on it.  
This component doesn't render anything on the dom.

#### Field Observer Props

* `name: string`
* `onChange?: (fieldObserverData: FieldObserverData) => void`
* `onBlur?: (fieldObserverData: FieldObserverData) => void`
* `onFocus?: (fieldObserverData: FieldObserverData) => void`

where `FieldObserverData` is an object containing

* `name: string`
* `value: any`
* `formValues: Object`
* `data: any`
* `isActive: any`
* `isTouched: boolean`
* `setFieldValue: (field: string, value: any) => void`
* `setMultipleFieldValues: (fieldValues: Array<{field: string, value: any}>) => void`
* `setFieldError: (field: string, error: any) => void`
* `setMultipleFieldErrors: (fieldErrors: Array<{field: string, error: any}>) => void`
* `setFieldTouched: (field: string, isTouched: boolean) => void`
* `setMultipleFieldTouched: (fieldTouched: Array<{field: string, isTouched: boolean}>) => void`
* `setFieldData: (field: string, data: any) => void`
* `setMultipleFieldData: (fieldData: Array<{field: string, data: any}>) => void`
* `setActiveField: (field: string) => void`

---

### Form Observer

A FormObserver component observes values of the whole form and provides functions to access `onChange` on it.  
This component doesn't render anything on the dom.

#### Form Observer Props

* `onChange?: (formObserverData: FormObserverData) => void`

where `FormObserverData` is an object containing

* `values: Object`
* `setFieldValue: (field: string, value: any) => void`
* `setMultipleFieldValues: (fieldValues: Array<{field: string, value: any}>) => void`
* `setFieldError: (field: string, error: any) => void`
* `setMultipleFieldErrors: (fieldErrors: Array<{field: string, error: any}>) => void`
* `setFieldTouched: (field: string, isTouched: boolean) => void`
* `setMultipleFieldTouched: (fieldTouched: Array<{field: string, isTouched: boolean}>) => void`
* `setFieldData: (field: string, data: any) => void`
* `setMultipleFieldData: (fieldData: Array<{field: string, data: any}>) => void`
* `setActiveField: (field: string) => void`

## Acknowledgment

* [react-final-form](https://github.com/final-form/react-final-form)

  * Api design
  * Lots of code pieces

* [formik](https://github.com/jaredpalmer/formik)
  * Lots of code pieces

## License

MIT

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