JSONEditor can now be used as a controlled component

@vankop I think you will like the latest release of the jsoneditor, v5.20.1, which allows using it as a controlled component in a framework like React. There are two new methods update(json) and updateText for this, and two new callback methods onChangeText and onChangeJSON (checkout the docs for details).

You can find two react examples in the examples folder for inspiration:

https://github.com/josdejong/jsoneditor/tree/master/examples/react_demo https://github.com/josdejong/jsoneditor/tree/master/examples/react_advanced_demo

It would be great if you could update jsoneditor-react to utilize this new functionality, and I would love to hear your feedback on whether it all works smooth or if you encounter issues.

[Jezternz]

For anyone else who does not have time to take a new repo under their belt, this was my work-around to get controlled mostly working with the current version:

import React, { useEffect, useRef } from 'react';
import { JsonEditor } from 'jsoneditor-react';

import 'jsoneditor-react/es/editor.min.css';

export const ControlledJsonEditor = ({ value, onChange }) => {
    const jsonEditorRef = useRef();
    useEffect(
        () => {
            const editor = jsonEditorRef && jsonEditorRef.current && jsonEditorRef.current.jsonEditor;
            if(editor && value){ editor.update(value); }
        },
        [jsonEditorRef, value]
    )

    return (    
        <JsonEditor
            ref={jsonEditorRef}
            value={value}
            onChange={onChange}
        />
    );
}

[DominicTobias]

Awesome thanks @josdejong that component worked well, this one doesn’t update when the value changes