A react/redux implementation of an editable property grid.
JavaScript Other
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
config
scripts
src
test
.gitignore
.npmignore
CHANGELOG.md
LICENSE
README.md
index.html
index.js
package.json
screenshot.png

README.md

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)