fform: React & JSONSchema - maximum flexibility
Flexibile form (fform) is a form builder with minimal code redundancy, while being extremely flexible and extensible. Used technology stack: React (v16), Redux (optional), JSONSchema , TypeScript . The main idea is the maximum possible reuse of circuits, components and functions.
Features
- 98kb minified, 28kb compressed
- Quick Start Form Designer
- Combining and reusing forms or parts of them when using the properties
oneOf
,allOf
,$ref
- Validation sync / async / JSON / submit
- Native redux support, but it is possible to use any other storage (including internal)
- Full support for arrays (add / remove / move)
- Built-in Viewer
- Fully customizable and addable form elements
- SSR support
- No dependencies (React as external)
Since, according to the JSONSchema specification, it is defined by data only in the JSON format, in fform the form is defined by 2 objects:
- JSONSchema scheme (draft v4, with additional properties) containing only JSON data and describing the form fields and the location of objects like buttons, links, tabs, etc.
- an elements object containing React (v16) components, functions, frequently used parts of components and, in principle, any other js or JSON code that can be referenced both from any part of the elements object and from the extended fields of the JSONSchema object. In its essence, elements are a repository of bricks of code from which the whole form is then assembled, and the degree of elementarity of these cypriots is determined by the developer.
Flexibility, extensibility and re-application of ready-made circuits, components and functions are implemented as follows:
- Extending schemas using the $ ref and allOf properties as described in the JSONSchema specification . Link to an example .
- Extending the elements object using a similar principle, but with a different syntax (to visually distinguish where the scheme expands and where elements expand). Documentation Link to an example .
- Data and event handlers use pipes from js functions in much the same way as linux does. The output of one function is fed to the input of the next, which (with the correct division of responsibilities of functions) allows you to reuse existing functions, and add new ones only if functionality that has not yet been implemented is required. Documentation Link to an example .
References
All Articles