react-form-addons
provides a set of methods and components for composing forms in React. Conceptually it adopts the style of decorators
/ higher-order components
, allowing you to keep your actual declaration of forms as Functional Components.
During the course of my work which involves building an internal admin panel, the amount of forms that have to be built is not small. Every single form has it's own set of rules and side-effects, which may be nested or have a dependency in other form.
This project is an exploration of possible ways of splitting responsibility during a form lifecycle to make it more maintainable.
- compose
- withProps
- withState
- withSideEffects
- withValidation
- branch (for nested forms)
- collection
- withReduxState (Redux)
Install the library:
npm install react-form-addons --save
// or
yarn add react-form-addons
import React from 'react';
import {compose, withProps, withState} from 'react-form-addons';
const Form = (props) => (
<div>
<input
name='input1'
onChange={props.onChange}
value={props.getFormData('input1')}
/>
// ...other inputs
</div>
);
export default compose(
withState(),
withProps()
)(Form);
For more examples, check out the documentation site
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 nowbranch()
- what used to be
connect()
is nowcollection()
Checkout the v2.0.0 release notes
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.
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:
export default compose(
withState(),
withProps()
)(Form);
can become
export default compose(
withLocalStorage(),
withProps()
)(Form);
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.
import {withReduxState, formReducer} from 'react-form-addons/lib/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)
<Form name='example' />
There is a live example in the documentation site.
The implementation of a compose
methodology was highly inspired by react-reformed.
react-form-addons
is MIT licensed