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
A react/redux implementation of 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 provide a powerful and performant hierarchical grid dynamically.
This project is a WIP: some important features are not there yet, but hopefully they will soon!
Installation
npm install --save react-property-gridUsage
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
<PropertyGrid schema={schema} />,
document.getElementById('property-grid')
)For best results, it is better to add a
* {
box-sizing: border-box;
}to your stylesheet.
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
anyOflist when adding an item (now it's auto-selecting the first one) -
allOfproperties -
oneOfproperties -
notproperties - object's
minPropertiesandmaxProperties - array's
uniqueItems - schema- and property-
dependencies -
patternProperties - Circular
$refs - 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!