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

``javascript
class MyComponent extends Component {

constructor(props) {
super(props);
this.state = {
json: undefined / setup here or load elsewhere /
}
}

callback = (changes) => {
this.setState({json: changes});
};

render() {
return (



);
}
}
`

Parse

It possible to parse and see errorMessage from parsing with the following helper method

`javascript
import { parse } from 'react-json-edit';

load_callback(text) {
const parsed = parse(text);

if(parsed.json === undefined) {
this.setState({message: parsed.errorText});
} else {
this.setState({json: parsed.json, message: undefined});
}
}

render() {
return (



);
}
`

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.

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.

`javascript
render() {
return (



);
}
``

TODO

1. Test!
2. More setup options
- Number of levels
- Configure add buttons
- Schema for adding stuff
3. Eventually built in text editor where result is parsed automatically