react-form-manager
is a dynamic form for react with validation and data posting support with customizable input components.
$ npm i --save react-form-manager
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;
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();
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 |
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);