Fform NPM | npm.io

Table of content

Overview

Flexible Form (fform) - form builder with minimum redundancy, maximum flexibility, and extendability. It uses JSONSchema to describe forms, React (v16) for rendering and has native Redux support for state storage but can be used with any other external storage or can use only internal storage (storage agnostic).

See fform-constructor for live demo.

Features

98kb minified, 28kb gziped
form-constuctor for quick start
form extension, combination and reuse with JSONSchema's allOf, oneOf, $ref properties
sync/async/JSON/submit validation
storage agnostic, native redux support, can be used with any external storage or can use own internal storage
built-in arrays (add/del/move operations)
built-in viewer
fully customizable
SSR support

Installation & Usage

To install the stable version:

npm install --save fform

This assumes that you are using npm with a module bundler like webpack

Without JSON validaton

import {FForm, elements} from 'fform';
import {render} from 'react-dom';

render(<FForm core={{name:"name", schema: {type:"string"}, elements}}/>, document.querySelector('#root'));

With JSON validaton

import {FForm, elements} from 'fform';
import {render} from 'react-dom';

import imjvWrapper from 'fform/addons/imjvWrapper';
import * as imjvValidator from 'fform/addons/is-my-json-valid-lite';
const JSONValidator = imjvWrapper(imjvValidator);

render(<FForm core={{name:"name", schema: {type:"string"}, elements, JSONValidator}}/>,
		document.querySelector('#root'));

How to use with different storages see in documentation