All Projects → audibene-labs → react-jsonschema-form-layout

audibene-labs / react-jsonschema-form-layout

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-jsonschema-form-layout

react-parallax-card
[wip] React component for a 3D card with parallax effects similar to Apple TV app icons.
Stars: ✭ 21 (-68.66%)
Mutual labels:  react-component
react-material-datetimepicker
Material DateTime Picker для React.js
Stars: ✭ 12 (-82.09%)
Mutual labels:  react-component
react-accessible-modal
Accessible modal dialog component for React
Stars: ✭ 17 (-74.63%)
Mutual labels:  react-component
react-drag-list
A simple draggable list component。
Stars: ✭ 30 (-55.22%)
Mutual labels:  react-component
fluent-windows
🌈 React components that inspired by Microsoft's Fluent Design System.
Stars: ✭ 122 (+82.09%)
Mutual labels:  react-component
animation-wrapper-view
Declarative animations with imperative controls for RN/RNW.
Stars: ✭ 53 (-20.9%)
Mutual labels:  react-component
fhir-questionnaire-render-react
Render FHIR Questionnaire as a web form using FHIRFormJS
Stars: ✭ 18 (-73.13%)
Mutual labels:  react-component
react-circle-flags
🚀 A React component with a collection of 300+ minimal circular SVG country flags. Wrapper of HatScripts/circle-flags
Stars: ✭ 29 (-56.72%)
Mutual labels:  react-component
react-crud-icons
57 SVG icons for CRUD applications, packaged as a React component with light & dark themes and tooltip.
Stars: ✭ 19 (-71.64%)
Mutual labels:  react-component
react-markdown-heading
Render markdown table of contents as React component.
Stars: ✭ 18 (-73.13%)
Mutual labels:  react-component
react-timepicker
React timepicker in Android KitKat style
Stars: ✭ 23 (-65.67%)
Mutual labels:  react-component
react-crossfade-image
react-crossfade-image - Simple React component for crossfading images - No CSS needed
Stars: ✭ 33 (-50.75%)
Mutual labels:  react-component
React-Limited-Infinite-Scroll
A limited infinite scroll component for React(React有限无限加载组件)
Stars: ✭ 37 (-44.78%)
Mutual labels:  react-component
react-table-filter
Create Filters on table column items(like Excel)
Stars: ✭ 54 (-19.4%)
Mutual labels:  react-component
react-native-stateview
A react native wrapper view to add loading, content, error and placeholder states to your component
Stars: ✭ 28 (-58.21%)
Mutual labels:  react-component
esn
这是一个常用js小型工具库
Stars: ✭ 15 (-77.61%)
Mutual labels:  react-component
histoslider
📊 A D3 based histogram slider component for React.
Stars: ✭ 31 (-53.73%)
Mutual labels:  react-component
react-sweet-progress
A way to quickly add a progress bar to react app 🌈
Stars: ✭ 250 (+273.13%)
Mutual labels:  react-component
delete-react-zombies
CLI to search and delete unimported 🧟components in your react ⚛️ files
Stars: ✭ 70 (+4.48%)
Mutual labels:  react-component
react-async-button
React button component for handling async actions
Stars: ✭ 31 (-53.73%)
Mutual labels:  react-component

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 }
    }
  ]
}
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].