In this post, I will demonstrate how to use Facebook React to build a simple form. It leverages the
wingspan-forms is a a dynamic form library for Facebook React, providing abstractions for building
dynamic forms and controlled grids. Widgets are provided by Telerik's KendoUI. wingspan-forms is
about half "Kendo-React adapter", and half general functional-programming friendly form abstractions that aren't
coupled to the underlying widget implementation. The higher level of abstraction is the important bit - this
level of abstraction isn't possible in "just Kendo" or any other OOP style widget library.
Here is a live demo of the form we will build:
Lets start with a basic React component.
Next we will add the most basic widgets, KendoText. KendoText is basically the same as React's builtin controlled
input component, with some minor enhancements.
Almost all form fields need at least a label, so lets wrap our KendoText in a FormField. FormField takes an
isValid prop which sets some css for the invalid-style and the invalid-tooltip, as well as a
fieldInfo prop for various optional metadata, like a label.
We know enough now to also use KendoDate, KendoNumber and KendoComboBox:
React doesn't yet have a way to use React components that are namespaced, so the following JSX does not work:
<WingspanForms.KendoComboBox ... />
Until the React folks decide on a mechanism to allow this, we have to alias the components into the local scope. We can
That's an awful lot of boilerplate, so lets introduce some new abstractions. wingspan-forms provides
AutoControl, which figures out which widget to render by inspecting the fieldInfo.
We can simplify this further with AutoField, which simply composes AutoControl and
Let's use our functional programming chops to abstract even further, and make all the fields use the same
onChange callback. Note the 'gender' fieldInfo got a little more complicated, since
KendoComboBox requires configuration.
You could abstract further. Try implementing AutoForm.
Lets add some validation. Note the AutoField's isValid prop changed.