react-jsonschema-form-layout

Simple Layout Field to offer a variety possibilities to react-jsonschema-forms

Showing:

Popularity

Downloads/wk

79

GitHub Stars

64

Maintenance

Last Commit

4mos ago

Contributors

3

Package

Dependencies

4

Size (min+gzip)

53.1KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

react-jsonschema-form-layout

Travis npm package 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

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

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 }
    }
  ]
}

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100