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

    Install

    npm i react-json-edit

    DownloadsWeekly Downloads

    91

    Version

    0.3.1

    License

    MIT

    Last publish

    Collaborators

    • eightyplus