react-jsonschema-form-layout

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

Just a small custom field for the awesome react-jsonschema-form.

see DEMO

Key features:

* support bootstrap's grid
* add non-form elements in between
* ability to control display of elements based on form-state

[build-badge]: https://img.shields.io/travis/audibene-labs/react-jsonschema-form-layout/master.png?style=flat-square
[build]: https://travis-ci.org/audibene-labs/react-jsonschema-form-layout

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/react-jsonschema-form-layout

[coveralls-badge]: https://img.shields.io/coveralls/audibene-labs/react-jsonschema-form-layout/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/audibene-labs/react-jsonschema-form-layout

!2017-03-02 14 09 19

Installation

``
yarn add react-jsonschema-form-layout
`

Usage:

Make sure you checkout the demo-src and the test-src

`javascript
const schema = {
title: 'Todo',
type: 'object',
required: ['title'],
properties: {
'password': {
'type': 'string',
'title': 'Password'
},
'lastName': {
'type': 'string',
'title': 'Last name'
},
'bio': {
'type': 'string',
'title': 'Bio'
},
'firstName': {
'type': 'string',
'title': 'First name'
},
'age': {
'type': 'integer',
'title': 'Age'
}
}
}

const fields = {
layout: LayoutField
}

const uiSchema = {
'ui:field': 'layout',
'ui:layout': [
{
firstName: { md: 6 },
lastName: { md: 6 }
}, {
bio: { md: 12 }
}, {
age: { md: 6 },
password: { md: 6 }
}
]
}
``