React support?

[narciero]

Are there any plans to create a json-editor React.js component?

Thanks!

[narciero]

The link you posted returns 404...but yea it would be great to have an 'official' react component as part of this lib, id be willing to help contribute.

[loganvolkers]

Mozilla is also sponsoring a popular project: https://github.com/mozilla-services/react-jsonschema-form

[schmunk42]

@loganvolkers Is the Mozilla lib a full replacement for json-editor?

@narciero What would be needed to make this a react-component?

[s-a]

import '@json-editor/json-editor' resolves to object instead of function. I guess there is missing something like an AMD loader in there. Any news on this thread?

[marc7000]

Use import JSONEditor from '@json-editor/json-editor' works with Vue.js and Angular 2.

[s-a]

This does ironically work in react development but not in production build. I use node node_modules/react-scripts/bin/react-scripts.js build to build react app for production deplyoment.

[schmunk42]

@crisu83 Can you shed some light on this? (since you're working a lot with react)

[crisu83]

@schmunk42 looking at the code it seems that this editor uses jQuery and DOM manipulation, and usually React doesn’t play very nice with DOM manipulation, so I’m not sure.

[schmunk42]

@crisu83 Thank you for the feedback!

[Dids]

@marc7000 Can you confirm it's supposed to work with Vue? I can partially see editor elements, but it's throwing the following error: TypeError: (new _json_editor_json_editor__WEBPACK_IMPORTED_MODULE_6___default.a(...)) is not a function

UPDATE: Looks like it's actually initializing without errors, and only erroring when trying to call editor.getValue()

UPDATE 2: Never mind, turned out to be unrelated after all. :)

[pmk65]

I don't understand why info like this isn't added to the documentation or wiki?
The same questions pop up again and again because there's no info in the documentation.
Same goes for new features that are not documented. 😞

[marc7000]

@Dids yes i can, i had a sample project, but i already deleted it. when i have time, i check it again and add it to the documentation.

[VadimTikhonyuk]

@Dids yes i can, i had a sample project, but i already deleted it. when i have time, i check it again and add it to the documentation.

Hi, so where I can find, looks like Wiki page doesn't have article about this

[butters16]

I decided to use this in my react code

const JSONEditor = require("@json-editor/json-editor").JSONEditor;

with my entire component looking like this (although it's rough and i'm likely to refactor it as i actually start to develop, but coding practices are not the point of this thread 😉)

import React, {useEffect} from 'react';
import schema from "./schema.json"
import "@fortawesome/fontawesome-free/css/all.css"
const JSONEditor = require("@json-editor/json-editor").JSONEditor;

const BuildView = () => {
    useEffect(() => {
        const element = document.getElementById('editor_holder');
        const editor = new JSONEditor(element, {
            schema: schema,
            display_required_only: true, // circular references will blow up without this
            theme: 'bootstrap4',
            iconlib: 'fontawesome5'
        });
    }, []);

    return <div id='editor_holder'></div>
};

export default BuildView;