react-json-edit

0.3.1 • Public • Published

react-json-editor

JSON editor for React

Install

NPM

How to use

  • import JsonEditor component

import { JsonEditor } from 'react-json-edit';

  • Add to render method and supply a callback method
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 (
      <div>
        <JsonEditor value={this.state.json} propagateChanges={this.callback}/>
      </div>
    );
  }
}

Parse

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

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 (
   <div>
     <JsonEditor value={this.state.json} propagateChanges={this.callback}/>
     <span>{this.state.message}</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.

  render() {
    return (
      <div>
        <JsonEditor value={this.state.json} tableLike={true} propagateChanges={this.callback}/>
      </div>
    );
  }

TODO

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

Dependents (8)

Package Sidebar

Install

npm i react-json-edit

Weekly Downloads

86

Version

0.3.1

License

MIT

Last publish

Collaborators

  • eightyplus