react-json-editor
JSON editor for React
Install
How to use
- import JsonEditor component
import { JsonEditor } from 'react-json-edit';
- Add to render method and supply a callback method
{ superprops; thisstate = json: undefined /* setup here or load elsewhere */ } { this; }; { return <div> <JsonEditor value=thisstatejson propagateChanges=thiscallback/> </div> ; }
Parse
It possible to parse and see errorMessage from parsing with the following helper method
; { const parsed = ; ifparsedjson === undefined this; else this; } { return <div> <JsonEditor value=thisstatejson propagateChanges=thiscallback/> <span>thisstatemessage</span> </div> ;}
Styling
I decided to use inline styling, due to troubles with Isomorphic rendering. The styling can be changed with a props on JsonEditor or via css.
<JsonEditor styling={ ... object }
where the following keys can be set: root, array, object, object-row, array-row, value, key, string, number, undefined, boolean, null, button, add-group (AddButton), add-input, add-button, save-button, cancel-button, delete-button
.
Remember that React uses different style names than css does.
or the css class names (which trumps inline style!):
JsonEditor, ArrayItem, ObjectItem, ArrayRow, ObjectRow, KeyItem, StringItem, NumberItem, BooleanItem,
Editor elements:
AddButton, AddInput, add-input, add-button, save-button, cancel-button, delete-button,
Table like style
Add props tableLike={true}
to view json in a table.
{ return <div> <JsonEditor value=thisstatejson tableLike=true propagateChanges=thiscallback/> </div> ; }
TODO
- Test!
- More setup options
- Number of levels
- Configure add buttons
- Schema for adding stuff
- Eventually built in text editor where result is parsed automatically