react-form-addons

> Utility belt for building forms with functional components in React.

[![Build Status][build-badge]][build-link]
[![npm package][npm-badge]][npm-link]
[![PRs Welcome][pr-welcome-badge]][pr-welcome-link]

About

react-form-addons enables the construction of simple or nested forms in React while keeping the components as _functional_ components.

The library abstracts possible data input patterns like lists of data, nested
form data or even conditional form data into Higher-Order functions, and ultimately builds and exposes a final "formData" and "formMeta" to your chosen state engine.

It is __independent of state libraries__, i.e. if you want to use React Component State, Redux or any other state management engine, you should be able to do so with minimal effort.

For examples, check out the React Component State or Redux State implementations.

Table of Contents

- [Documentation Site][doc-link]
- Documentation Source

#### core (lib)

- compose
- formControl
- withProps
- withState
- withSideEffects
- withValidation
- branch (for nested forms)
- list (for replicating datasets)
- collection (conditional forms)

#### utils

- SyntheticFormEvent

#### extensions

- withReduxState (Redux)

#### components

- Input (via formControl)
- Textarea (via formControl)

Installation

Install the library:

``
npm install react-form-addons --save

// or

yarn add react-form-addons
`

Quick Look

`js
import React from 'react';
import {compose, withProps, withState} from 'react-form-addons';

const Form = (props) => (


export default compose(
withState(),
withProps()
)(Form);
`

For more examples, check out the [documentation site][doc-link]

v2 Upgrade

This library has been totally reworked for v2. As such there are some breaking changes in the way the higher-order components (hoc) work. The biggest change is that Component properties are now decoupled to a withProps hoc and withState only handles keeping of state and not any of the state manipulations.

__The following are temporarily deprecated.__

It may make a comeback in a future release.

- createField
- createForm

__Method renames:__

- what used to be collection() is now branch()
- what used to be connect() is now collection()

Checkout the v2.0.0 release notes

Form Event Normalization

Your event handlers will be passed instances of SyntheticFormEvent when it's piped through withProps onChange handler.

It inherits target.name, target.value, stopPropagation() and preventDefault() from React's Event System and adds on 2 sub-properties formData and formMeta.

The 2 sub-properties are heavily used to calculate and update the current state of the form within the compose pipeline.

Extending Usage

While the focus on v2 rewrite still hinges on Component State, we can easily extend this to other state management utilities.

For example, in it's simplest form:

`js
export default compose(
withState(),
withProps()
)(Form);
`

can become

`js
export default compose(
withLocalStorage(),
withProps()
)(Form);
`

$3

This library also provides a component for handling state in redux. You'll need to install react-redux as well as redux for it to work.

_Note:_ Redux components are not under default library export. As such, you'll have to import from a sub folder. i.e.

`js
import {withReduxState, formReducer} from 'react-form-addons/redux';

// Creating stores
const reducers = combineReducers({
forms: formReducer
});

const store = createStore(reducers);

// During form composition
const Form = compose(
withReduxState(),
withProps()
)(FormInputs);

// Usage (note: prop "name" is required)