Jsoneditor: Could you please support React?

[jtyjty99999]

like https://github.com/securingsincity/react-ace

[aadrian]

+1

[josdejong]

Yeah that would be cool. If anybody is interested in picking this up please let me know.

[104gogo]

+1

[mxmind]

+1

[hegdeashwin]

+1

[Yonben]

+1

[cage1618]

+1

[liuxihua]

+1

[Adam-Burke]

+1

[hassankhan]

I've managed to integrate JSON Editor into my React project, there were a few difficulties in getting the images to load up via Webpack because of the paths defined in the CSS files. I've worked around it for the moment but a nicer solution would be to share the styles in SCSS and allow overriding certain variables instead IMO. I've also made the following wrapper for use in my project, sharing it here in case it helps anyone else:

import { cloneDeep } from 'lodash';
import React, { Component, PropTypes } from 'react';
import JSONEditor from 'jsoneditor';
import './jsoneditor.css';

export default class TreeView extends Component {

  static propTypes = {
    json : PropTypes.oneOfType([
      PropTypes.array,
      PropTypes.object,
    ]).isRequired,
    height : PropTypes.number,
    width  : PropTypes.number,
  };

  static defaultProps = {
  };

  constructor(props) {
    super(props);

    this.state = {
      json : cloneDeep(props.json),
    };

    this.editor    = null;
    this.editorRef = null;
  }

  componentDidMount() {
    this.editor = new JSONEditor(this.editorRef, {
      mode     : 'tree',
      onChange : this.handleChange,
    });
    this.editor.set(this.props.json);
  }

  componentWillReceiveProps(nextProps) {
    this.editor.set(nextProps.json);
    this.setState({
      json : nextProps.json,
    });
  }

  componentWillUnmount() {
    this.editor.destroy();
  }

  handleChange = () => {
    try {
      this.setState({
        json : this.editor.get(),
      });
    } catch (e) {
      // HACK! This should propagate the error somehow
      console.error(e);
    }
  }

  render() {
    const { height, width } = this.props;
    return (
      <div
        id='editor'
        ref={(ref) => { this.editorRef = ref; }}
        style={{ height, width }}
      />
    );
  }
}

[josdejong]

Thanks for sharing @hassankhan

[hassankhan]

No problem, a few other things I noticed - if you make the component above stateless and manage the state higher up, then you'll need to add some handling for shouldComponentUpdate() otherwise it'll re-render the tree and you'll lose focus.

[josdejong]

Indeed. See also #39 and #337: I'm working on a completely new version of the editor which will have support for patching rather than just replacing the whole JSON document.

[hassankhan]

That's awesome news!! I'd love the extra hooks, and patch-updating sounds great too. Would it be possible to re-do the CSS in SCSS for v6 as well?

[hassankhan]

Also thanks for your project, @josdejong! Stupidly spent three days trying to create something similar before stumbling across JSON Editor.

[josdejong]

Stupidly spent three days trying to create something similar

As long as you're learning and have fun it's no time wasted :)

[nicolaerusan]

Just got this running in my React project as well. As a quick note for anyone who might hit a similar issue, if you're using WebPack you need to include the JSON Loader appropriately in the webpack config.json file. I kept seeing this issue:

ERROR in ./~/ajv/lib/refs/json-schema-draft-04.json
Module parse failed: /{myprojectfolder}/node_modules/ajv/lib/refs/json-schema-draft-04.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.

This thread helped me find the resolution, which was editing the webpack config:
https://github.com/foxhound87/mobx-react-form/issues/1

[josdejong]

@nicolaerusan maybe this is something to report at ajv? https://github.com/epoberezkin/ajv/issues

[hassankhan]

@josdejong It's just something that has to be done to get Webpack to shut up, unfortunately.

[yoiang]

Building on @hassankhan 's earlier post I've put together a little further wrapping. Not everything has been tested yet, let me know if something isn't working or you have any further ideas in the Gist comments!

https://gist.github.com/yoiang/6f82874f4fd8fc1a37631dc9cad27172

[FlorianReich1986]

@nicolaerusan I also had this issue, but could not fix it as described by you
@yoiang I am using your code. Although it is working in general all the styling is gone. Do you know how to fix this?

[yoiang]

@FlorianReich1986 Yea, we had to manually override it, which was really not optimal. As a result we've since moved onto another JSON editor library

[veeramarni]

looks like we can use @next version as it was rewritten in react.

[josdejong]

@veeramarni yes that's correct. There is still a build script missing to generate code that can be consumed by a React application, see #393 (help would be welcome).

[alekseyMusakhahov]

Also TypeScript version of @yoiang gist:
https://gist.github.com/alekseyMusakhahov/1b02ca391545fc9775d406f26c6aa4b7

[welljs]

@alekseyMusakhahov thanks, just in time

[vankop]

React uncontrolled component wrapper for jsoneditor

It will be greate if you have any ideas to implement.

Also I faced with ace theme problem, if we set custom theme ace-jsoneditor theme class changing on custom theme class, so min-height become 0. I fixed it with setting min-height to ace_editor

[blowsie]

Someone may be able to port the vue-version if needed

[josdejong]

:+1: thanks for sharing @blowsie

There are also two React examples included: https://github.com/josdejong/jsoneditor/tree/master/examples