This blog aims to introduce you to a new forms library that I’ve been working on recently. As there are lots of forms libraries out there you probably need to know what is different about this one…

Keep reading if you:

Have a need to build forms with complex relationships between the fields

Want to have full control of the layout of the fields in your forms

Want to render your choice of field components (e.g. Material, Bootstrap, Atlaskit, native HTML or even your own library)

Want to be able to build forms through a GUI without needing to write any code

…Hopefully you’re still with me.

Building Relationships

React-Forms-Processor (RFP) focuses on defining the relationships between fields rather than the fields themselves. For example you may:

Want a field to only be visible if another field has a certain value

Want the value of that field included in the overall value of the form when it is visible

Want your form to only be valid when all the fields are valid

There are many other use cases that are supported and most are well described in the tutorial in the online demo.

How To Use It

RFP makes used of the new context API introduced in React 16.3 to provide two core components: Form and FormFragment. By default fields will be rendered using native HTML elements but you can optionally provide a renderer for a richer experience. At the time of writing there are Atlaskit and Material-UI renderers but more will be added in the future and it is incredibly simple to write your own (it is simply a case of mapping well defined attributes to the props of your desired component for each type of field you want to render).

You then provide the Form component with a JSON definition that specifies the fields to be rendered and the relationship between them. If you want to group your fields (e.g. in tabs, columns, sections, etc) then you can split the definition across multiple FormFragment components nested somewhere within the Form component.

Form Builder

To make things even easier you can create the JSON specific for your form using the Form Builder tool in the online demo. This gives you a preview of the form that you’re building as well as displaying the JSON specification for you to copy and paste into your application.

Option Handling

Static options can be defined in the JSON model but if you need options to be more dynamic (e.g. fetched from a server or updated based on the changing values of other fields). In the online demo you can see an example of this where a ‘Members’ field on the ‘Single Definition’ tab fetches characters from SWAPI.

This more advanced options handling can be achieved by providing your Form component with an optionsHandler prop that is a function that accepts the current form value and the field to generate options for and can return either a Promise or an array of options.

Validation

Currently there are 4 basic validators for handling:

Regular expression pattern matching

Minimum character length

Maximum character length

Minimum and/or maximum numerical values

…which can be mix and matched as necessary. In the future additional validators will be added as well as support for a custom validation handler to be provided as a prop.

Summary

I’d really love to get some feedback on what I’ve done so far in order to know whether or not it’s a project that I should continue to develop. I’m confident that it would be useful for application development as it tackles concrete use-cases that I’ve encountered previously.

Please try out the online demo or install the NPM package and try it out in your own application and let me know what you think — either good or bad!

Thanks for reading!

Next Post: “How to create forms with the React Forms Processor”