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!
Installation
npm install --save react-property-grid
Usage
ReactDOM
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
andmaxProperties
- array's
uniqueItems
- schema- and property-
dependencies
-
patternProperties
- Circular
$ref
s - More useful description on caption row
- Custom field editors?
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Credits
Thanks to Irion for financing this project and contributing to it!