Utility belt for building forms with functional components in React.
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.
Table of Contents
- branch (for nested forms)
- list (for replicating datasets)
- collection (conditional forms)
- withReduxState (Redux)
Install the library:
npm install react-form-addons --save // or yarn add react-form-addons
;;const Form =<div><inputname='input1'onChange=propsonChangevalue=props/>// Or just access the property<inputname='input2'onChange=propsonChangevalue=propsformDatainput2/>// ...other inputs</div>;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.
- what used to be
- what used to be
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.
preventDefault() from React's Event System and adds on 2 sub-properties
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:
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.
;// Creating storesconst reducers =;const store = ;// During form compositionconst Form =FormInputs;// Usage (note: prop "name" is required)<Form name='example' />
The implementation of a
compose methodology was highly inspired by react-reformed.
react-form-addons is MIT licensed