Net Possibility Multiplier

    TypeScript icon, indicating that this package has built-in type declarations

    0.6.1 • Public • Published

    React Form Generator with UI Fabric React Components

    All of you are very welcome to contribute with this project!

    Join the chat at npm version License: MIT Build Status Dependency Status codecov Downloads

    Responsive form generator with JSON for react. UI Fabric and other controls are used for rendering the 24 control types.


    • Validation
    • Translatable form
    • With custom controls, validators, and custom actions enhanceable
    • Responsive
    • 24 Out of the Box controls
    • 10 Validators

    The Basic Code for the validation for the formula comes from the experiments from UI Fabric
    UI Fabric Form Experiments


    The package can be installed via NPM:

    npm install formgen-react --save

    If you not just add, then add the babel-polyfill to your project:

    npm install babel-polyfill

    Then add at your entry point the statement:

    import 'babel-polyfill/browser.js';

    Otherwise you get Problems with some browsers.


    Full documentation


    The example below shows how to use the form generator with a simple json definition. This JSON need to map to the JSON schema:

    import * as React from 'react';
    import Form from 'formgen-react';
    var jsonForm = require('./test.json');
    export class Example extends React.Component {
    render() {
      return (
        onCancelForm={ () => console.log("cancel click") }
        onSubmitForm={ (formData:any) => console.log("submit click: " + JSON.stringify(formData)) }
        jsonFormData={jsonForm}  />)

    The above ./test.json file could look like this:

         "$schema": "../schemas/jfrom-schema.json",
         "id": "testform",
         "theme": "red",
         "title": "Test EN",
         "title_trans": {
             "de": "Test DE",
             "fr": "Test FR",
             "it": "Test IT"
        "rows": [{
            "columns": [{
                    "controls": [{
                        "id": "info",
                    "title": "<b>This is a Info about this Test Document in Englisch</b>",
                    "control_type": [ "InfoText" ],
                    "title_trans": {
                        "de": "<b>Das ist ein Info Text über dieses Dokument in Deutsch</b>",
                        "fr": "<b>Ceci est un texte d'information sur ce document en français</ b>",                    
                        "it": "<b>Questo è un testo informativo su questo documento in italiano</ b>"

    The JSON has to fit the Schema Definition:
    Form Schema
    You need also the following global Schemas:
    Object Translation

    Translating / Localization

    The form is fully translatable. Included are default translations for DE, IT, EN, and ES. Time and Date Controls can be localized. If you want provide other language, please let me know, or contribute with other languages.

    Browser Support

    The most Controls are UI Fabric Control. Also the Layout classes comes from UI Fabric. Here the Browser Support for UI Fabric: Browser support

    Local Development

    The master branch contains the latest version of the Form component. To start your example app, you can run npm start. This starts a simple webserver on http://localhost:3000.

    You can run npm test to execute the test suite. To help you develop the component we’ve set up some tests that cover the basic functionality for every control (in every control folder).


    Copyright (c) 2018 to hilkenan and individual contributors. Licensed under MIT license, see LICENSE for the full license.


    npm i formgen-react

    DownloadsWeekly Downloads






    Unpacked Size

    1.43 MB

    Total Files


    Last publish


    • hilkenan