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

Tutorial

Examples

Documentation

Last updated

v2.0.0-alpha.1

Install

npm install fform
yarn add fform

BUNDLE SIZE

Not Available

DOWNLOAD TIME

Not Available

CDNs

extras

Contributors

  • wtnm