jsx-dynamic-form v0.1.2

React + Bootstrap powered popup form component

Example Usage

import React from 'react';
import ReactDOM from 'react-dom';
import DynamicForm from 'jsx-dynamic-form';
import data from './data';

import './index.css';

function onConfirmCallback(data) {
  console.log(data);
};

function onCancelCallback() {
  console.log('cancelled');
};

function onDeleteCallback() {
  console.log('deleted');
}

ReactDOM.render(
  <DynamicForm
  definition={data.definition}
  data={data.data}
  onConfirmCallback={onConfirmCallback}
  onCancelCallback={onCancelCallback}
  onDeleteCallback={onDeleteCallback}/>, document.getElementById('root'));

Example Form Definition

const definition = {
    title: 'Enter your information',
    overlay: true,
    confirmButtonText: 'Confirm',
    cancelButtonText: 'Cancel',
    isOpen: true,
    fields: [{
        type: 'TextInput',
        name: 'UserName',
        label: 'Your name',
        required: true
    }, {
        type: 'Dropdown',
        name: 'EmploymentStatus',
        label: 'Employment Status',
        options: [
            {
                display: 'Employed',
                value: 'Employed'
            }, {
                display: 'Unemployed',
                value: 'Unemployed'
            }, {
                display: 'Self-employed',
                value: 'SelfEmployed'
            }
        ],
        value: 'Employed',
        required: true
    }, {
        type: 'TextArea',
        name: 'Notes',
        label: 'Notes',
        value: '',
        placeholder: 'Any additional comments'
    }]
};

const data = {  
    UserName: 'John Doe'
};

export default {
    definition,
    data,
}

Definition file explained

In the usual circumstances the definition file will not contain any data, just the static form definition. The data is located here just for demonstrational purposes, showing how data prepopulation can be used with the popup. The matching between provided data vs form definition element is based on the "name" property of the definition field.

Supported definition properties

Supported field properties and types

• TextInput
• NumberInput
• TextArea
• FreeText
• Dropdown

Dropdown options

Built-in validation

There is a basic validation at the moment: if a field is marked as required and is empty - the form cannot be submitted.