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

	Format	Required	What it does ?
name	string	YES	The name of your form
onSubmit	function	NO	A callback used when the form was submitted. Receives SyntheticEvent and an object with values { name: value }
attributes	array	YES	Array of Object to construct the form. You can group inputs on the same line with array in this array.
values	object	NO	An object to initialize the form { name: value }
errorHeader	string	NO	Custom header of error box
lang	string	NO	The lang used for default error messages.
material	boolean	YES	If true, the form will be display with material-ui instead semantic.

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

Attributes Props

	Format	Required	What it does ?
name	string	YES	The name of this input.
label	string	YES	The label of this input.
type	string	YES	One of Text, TextArea, Number, Radio, Boolean, Date, Select, Json, File (see below).
required	boolean	NO	This input can be required or not.
textAlign	string	NO	Text Alignment in Grid. One of left, center or right.
verticalAlign	string	NO	Vertical Alignment in Grid. One of left, center or right.

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

Text element

	Format	Required	What it does ?
placeholder	string	NO	Only if type is Text. The placeholder for this input.
minLength	string	NO	The mix length of strings for this input.
maxLength	string	NO	The max length of strings for this input.
disabledOnEdit	boolean	NO	Put in readonly if there is a init value
regexp	RegExp	NO	A Regular Expression to validate this input
regexpMsg	string	NO	A message which display when this input was not validate by regexp

Number element

	Format	Required	What it does ?
min	number	NO	The minimum number (number).
max	number	NO	The maximum number (number).

Date element

	Format	Required	What it does ?
min	string	NO	The minimum date (string Format: YYYY-MM-DD).
max	string	NO	The maximum date (string Format: YYYY-MM-DD).

TextArea element

	Format	Required	What it does ?
minLength	string	NO	The mix length of strings for this input.
maxLength	string	NO	The max length of strings for this input.

Select element

	Format	Required	What it does ?
multiple	string	NO	Multiple selection or not.
search	string	NO	The select can be searchable or not. This can't be used with material.
options	[object]	YES	An Array of object to construct the select { value: 'some', text: 'example' } or a function which return the same structure to live update the select input

Json element

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

	Format	Required	What it does ?
options	[object]	YES	An Array of object to construct the json { name: 'some', placeholder: 'example', required: true, regexp: myRegexp, regexpMsg: 'Some Error Msg', readOnly: false }
required	boolean	NO	If true, the Json must have at least one value

File element

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

	Format	Required	What it does ?
path	string	YES	path in bucket where store the file
publicRead	boolean	YES	If true, the file have a public URL. If false, the file will be private
accept	string	YES	Mime type to filter sended file
s3GetSignedUrl	function	YES	The function you provide should take file and callback arguments. Callback should be called with an object containing signedUrl key.
s3DeleteObject	function	YES	A function to delete the object on aws. The function you provide should take the public link argument. Must return a promise

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);