react-jsonschema-form-layout

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

Installation

yarn add react-jsonschema-form-layout

Usage:

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

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_grid: LayoutGridField
}

const uiSchema = {
  'ui:field': 'layout_grid',
  'ui:layout_grid': { 'ui:row': [
    { 'ui:col': { md: 12, children: [
      { 'ui:group': 'Name', 'ui:row': [
        { 'ui:col': { md: 6, children: ['firstName'] } },
        { 'ui:col': { md: 6, children: ['lastName'] } },
      ] },
      { 'ui:row': [
        { 'ui:col': { md: 6, children: ['password'] } },
        { 'ui:col': { md: 6, children: ['age'] } },
      ] },
      { 'ui:row': [
        { 'ui:col': { md: 12, children: ['bio'] } },
      ] },
    ] } },
  ] },
}