react-form-manager v0.4.0

react-form-manager

react-form-manager is a dynamic form for react with validation and data posting support with customizable input components.

Installation

$ npm i --save react-form-manager

Example

The simplest use case

import React, { Component } from 'react';
import Form from "react-form-manager";
import 'semantic-ui-css/semantic.css';

const Separator = (self) => (<h4 style={{margin: "3rem 0 -1rem 0"}}>{self.props.title}</h4>);

const modelAttributes = [
    [
        { name: "name", type: "Text", label:"Name", placeholder: "Enter your name", required: true },
        { name: "title", type: "Deferred", label: "Title", required: true, minLength: 3 },
    ],
    [
        { name: "sex", type: "Radio", label: "Sex", required: true, options: [
            {value: 'male', text: "Male"},
            {value:'female', text: "Female"}
        ]},
        { name: "age", type: "Number", label: "Age", required: true},
        { name: "dob", type: "Date", label: "Date of Birth", required: true, min:'1991-03-28', max: '1991-03-31'},
        { name: "human", type: "Boolean", label: "Is Human", required: true, verticalAlign: 'middle' },
    ],
    { name: "sn", type: "Number", label: "SN", placeholder: "Your Serial Number", max: 999, min: 100 },
    [
        { name: "hobbies", type: "Select", label: "Hobbies", options: [
            {value:'foot', text:'Football'},
            {value:'base', text:'Baseball'},
            {value:'rug', text:'Rugby'},
            {value:'dev', text:'Code'},
        ]},
        { name: "select", type: "Select", label: "Select One", options : [
            {value:"one", text: "Option 1"},
            {value:"two", text: "Option 2"},
            {value:"three", text: "Option 3"},
        ], required: true, search:true, multiple:true},
    ],
    <Separator title="Environment" />,
     /*{ name: "environment", type: "Json", label: "Environment", options: [
            {name: "ROOT_URL", required: true, placeholder: 'http://yourApp.techexmachina.com'},
            {name: "MONGO_URL", required: true, placeholder: 'mongodb://[username:password@]host1[:port1][,host2[:port2],...[,hostN[:portN]]][/[database][?options]]'},
            {name: "SOME_OTHER_VAR"}
        ]},*/
    { name: "description", type: "TextArea", label: "Description" },
    { name: "submit", type: "Submit", label: "Submit", textAlign:"center" }
];

const modelValues = {
    sn: 150,
    dob: '1991-03-30',
    hobbies: 'dev',
    select: ['one', 'two'],
    description: "hola!",
    human: true
};

class App extends Component {
    handleSubmit = (e, values) => {
        e.preventDefault();

        console.log(values);
    }

    render() {
        return (
            <div className="App">
                <Form onSubmit={this.handleSubmit} name="semantic" attributes={modelAttributes} values={modelValues} material={false} />
            </div>
        );
    }
}

export default App;

Form Props

You can submit the form with ref: call ref.submit();

Attributes Props

Attributes can be a React Element directly, to use separator for example.

Text element

Number element

Date element

TextArea element

Select element

Json element

A Json element is useful to display a gui to construct a json string which will be return on form submit.

File element

A File element can upload a file on AWS s3 bucket.

Customizing the Form

Alternatively you can use Field to define a input. @TODO Needs some extra examples

  import React from 'react';
  import { render } from 'react-dom';
  import Form, { Field } from 'react-form-manager';
  import 'semantic-ui-css/semantic.css';

  render(
      <Form>
        <Field type="Text" name="username" label="Username" required />,
      </Form>
  ,document.body);