react-form-manager
v0.4.0
Published
A dynamic form for React styled with semantic-ui or material-ui
Downloads
34
Readme
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);