React-form-layout NPM

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

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