react-form-layout

A form layout generator for your React components.

Using bootstrap css layout by default, and custom rendering is also allowed. (e.g. section, column, field, etc)

Create <Form />

create(Field, inputPropsLookupFn, fullLayoutFn, shortLayoutFn, buttons)

Argument	Type	Example
Field	Component	<Field name="primary" type="email" />
inputPropsLookupFn	function:object	(name) => {primary: {type: 'email' }}[name]
fullLayoutFn	function:ReactElement	refer to __tests__/ for usage
shortLayoutFn	function:ReactElement	refer to __tests__/ for usage
buttons	ReactElement	<input type="submit" />

Example Usage

let Field = class extends React.Component {
	    render () { return <input {...this.props} />; }
    },
    inputPropsLookupFn = (n) => { return {name: {type: 'text'}}[n]; },
    fullLayoutFn = (builder, props) => {
		let {layout, section, col} = builder;
		return layout(props, 
			section("Personal details",
				[ col(12, 'name') ]
			)
		);
	}, 
	shortLayoutFn = fullLayoutFn,
	buttons = <input type="submit" />;

let Form = create(Field, inputPropsLookupFn, fullLayoutFn, shortLayoutFn, buttons);
// <Form {...this.props} />

Configuration Props

Prop	Type	Description
renderLayout	function:ReactElement	overriding render fn for root/layout
renderSection	function:ReactElement	overriding render fn for section
renderCol	function:ReactElement	overriding render fn for column
renderField	function:ReactElement	overriding render fn for field
renderHidden	function:ReactElement	overriding render fn for hidden field
showAll	boolean	determine fulllayout/shortLayout
defaultValues	object	initial values for the form fiels

Helper functions

Input props lookup function

inputPropsLookup(fields, fieldName)  

Argument	Type	Example
fields	object	{name: {type: 'text'}, email: {type: 'email'}}
fieldName	string	name, email[0], email[1]

Input values lookup function

inputValuesLookup(values, fieldName)  

Argument	Type	Example
values	object	{address: [ {zip: '55555'} ]}
fieldName	string	address[0][zip]

Form input serialization function

formInputsSerialize(form)  

Argument	Type	Example
form	DOMNode	ReactDOM.findDOMNode(this.refs.form)

License

MIT