fform
v2.0.0-alpha.3
Published
Flexibile Form
Downloads
499
Maintainers
Readme
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
- simple form
- layouts and viewer
- arrays and oneOf
- stateMaps
- validation
- format and parse
- schema exten
- custom input
- tabs and steps
Documentation
- FForm
- fformCores
- API
get(...paths: string | string[]
)set(path: string | string[], value: any, opts?: setOpts )
getValue(opts?: getValueOpts)
setValue(value: any, opts?: setValueOpts)
getDefaultValue()
reset(opts?: resetOpts)
clear(opts?: clearOpts)
validate(path: boolean | string | string[], opts?: APIOptsType)
arrayAdd(path: string | string[], value: number | any[], opts?: APIOptsType)
arrayItemOps(path: string | string[], op: string, opts: arrayItemOpts)
setHidden(path: string | string[], value?: boolean, opts?: APIOptsType)
showOnly(path: string | string[], opts?: APIOptsType)
getActive()
execute()
- Basic schema properties
- Extended schema properties
- Validation
- Field structure and customization
- Form layout
- Elements
- Styling
- SSR