Generic JSON Editor For React

This is a generic JSON editor for React, specifically designed for attaching to React state values.

Installation:

# NPM
$ npm install @dustingetz/react-json-editor --save

Usage:

import _ from 'lodash';
import React from 'react';
import ReactDOM from 'react-dom';
import {Cursor} from 'react-cursor';
import JsonEditor from 'react-json-editor';
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      a: 10,
      b: '20',
      c: null,
      d: {
        foo: {
          bar: 42,
          baz: 55,
          buzz: 'womp'
        }
      },
      e: [
        {name: 'Alice', id: 0},
        {name: 'Bob', id: 1},
        {name: 'Charlie', id: 2},
        {name: 'David', id: 3}
      ]
    };
  }

  render() {
    var rootCursor = Cursor.build(this);
    return (
        <div className="App">
          <div>
            State
            <pre>{JSON.stringify(this.state, undefined, 2)}</pre>
          </div>
          <div>
            Editor
            <JsonEditor targetCursor={rootCursor} />
          </div>
          <div>
            Second editor, because we can
            <JsonEditor targetCursor={rootCursor} initialExpandedLevels={2}/>
          </div>
        </div>
    );
  }
}

window.app = ReactDOM.render(<App/>, document.getElementById('root'));

Default props.

defaultProps = {
  initialExpandedLevels: 0,
  targetCursor: undefined // the app state that we're targeting
};

Preview:

Download Details:

Author: dustingetz

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/dustingetz/react-json-editor

License: MIT