JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 57
  • Score
    100M100P100Q70080F
  • License MIT

A react/redux implementation of hierarchical, editable property grid, backed by JSON Schema.

Package Exports

  • react-property-grid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-property-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-property-grid

React/redux implementation of a hierarchical, editable property grid, backed by JSON Schema.

Heavily inspired by Treema, this React component takes a JSON Schema and optional default JSON data to dynamically build a powerful and performant hierarchical grid with editable values.

This project is a WIP: some important features are not there yet, but hopefully they will soon!

screenshot

Installation

npm install --save react-property-grid

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import PropertyGrid from 'react-property-grid'

ReactDOM.render(
  <PropertyGrid schema={schema} />,
  document.getElementById('property-grid')
)

Options

Name Description Default
schema A valid JSON Schema {"$schema": "http://json-schema.org/draft-04/schema#", "properties": {"hello": {"type": "string"}}}
data Optional default JSON data {"hello": "world"}
title Optional header title string "Properties"
onChange Optional callback executed when data changes function(data) { console.log(data) }

To do

  • Fields validation
  • Selection from anyOf list when adding an item (now it's auto-selecting the first one)
  • allOf properties
  • oneOf properties
  • not properties
  • object's minProperties and maxProperties
  • array's uniqueItems
  • schema- and property-dependencies
  • patternProperties
  • Circular $refs
  • More useful description on caption row
  • Custom field editors?

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Credits

Thanks to Irion for financing this project and contributing to it!

License

The MIT License (MIT)