

React Forms: form rendering and validation for React - andreypopp
http://prometheusresearch.github.io/react-forms/

======
andreypopp
I want to highlight few points in the design of the library.

Responsibility is divided between form schemas, form components and input
components:

* Form schema provides a high-level description of a form: what's shape of the data it handles, how to validate user input, what labels to render for each field and so on.

* Form components are React components which interpret form schemas to build UI and setup dataflow between different parts of the form.

* Input components handle user input, they should adhere to "value/onChange" contract and so are reusable outside of React Forms context.

We tried to make every aspect of React Forms to be extendable and replaceable:
form schemas can hold additional metadata, custom form and input components
can be created. There's a documentation page
([http://prometheusresearch.github.io/react-
forms/documentatio...](http://prometheusresearch.github.io/react-
forms/documentation/customizations.html)) which tries to put the light on how
to extend/customize React Forms components.

All of the form components except of the top level Form component are
stateless. Form state (value and validation state) is propagated to form
fields as lenses to the entire form state. On user input a corresponding form
field produces a new form value and validation state (via lenses, so this is
opaque to the form field itself) and notifies top level form component.

Form state is immutable (on each change a new value is produced) and so such
functionality as undo/redo can be implemented easily. See the example
([http://prometheusresearch.github.io/react-
forms/examples/und...](http://prometheusresearch.github.io/react-
forms/examples/undo.html)) which implements basic undo/redo in about 40LOC.

