Schema Form

Schema form is a highly capable React form generator library. It generates a form from data in the form of a JSON Schema. This specifies the data fields of the form, the validation and also elements of the presentation.

Building forms in React is a hard problem. Most widely-used form libraries for React tend to be lightweight helpers for building forms leaving most of the coding and layout for the developer. In this way they aim to keep flexibility but still leave a lot of work to be done.

Schema form is a full solution for the problem of forms, minimising the work necessary to create one in React. The danger is that this reduces flexibility: however Schema form is both powerful, with a full range of form fields, and extensible: a full event model is provided, custom components can be injected, and layout and styling can be easily customised. It implements nearly all features of JSON Schema allowing you to build heirarchical forms with lists of items, conditional fields, subforms, recursive forms and paging. Also as the form layout is data-driven, it can be controlled from external data sources or easily altered programmatically.

Schema form is built in Typescript and uses React hooks, minimising rerendering so as to make even large forms efficient. It returns the values in the form as a single Javascript object making it easy to process.

Links

• NPM package @restspace/schema-form: https://www.npmjs.com/package/@restspace/schema-form 
• Github repo: https://github.com/restspace/schema-form 
• Demo playground: https://restspace.io/react/schema-form/demo/ 

Restspace integration

Schema form is a central component of the UI for Restspace and integrates perfectly with it as a back end to both store entered data and allow for administrative users to control form layout within an application, like a CMS form builder.