update peer dependency to React 18

[Hussein-Shaito]

can please update the dependency to be compatible to the lastest version of react (18). Otherwise npm i fails with latest npm.

[mattqs]

I had the same problem with React 18 and found this fix:

npm i jsoneditor
npm i --save @types/jsoneditor

Next, here's the JSONEditorComponent:

import React, { useEffect, useRef } from "react";
import JSONEditor, { JSONEditorOptions } from "jsoneditor";
import "jsoneditor/dist/jsoneditor.css";
import { Card } from "primereact/card";

interface JSONEditorComponentProps {
  jsonData: any;
}

const JSONEditorComponent: React.FC<JSONEditorComponentProps> = ({ jsonData }) => {
  const containerRef = useRef<HTMLDivElement | null>(null);
  let jsonEditor: JSONEditor | null = null;

  useEffect(() => {
    if (containerRef.current) {
      const options: JSONEditorOptions = {};
      jsonEditor = new JSONEditor(containerRef.current, options);
      jsonEditor.set(jsonData);
    }

    return () => {
      if (jsonEditor) {
        jsonEditor.destroy();
      }
    };
  }, [jsonData]);

  return (
    <Card>
      <div ref={containerRef} style={{width: '100%', height: '400px'}}/>
    </Card>
  );
};

export default JSONEditorComponent;

In this TypeScript version, we have defined an interface JSONEditorComponentProps for the props that the JSONEditorComponent accepts, and we've used React.FC to define the type of the component. Also, jsonEditor and containerRef variables are defined with their specific types.

Here is how you can use the JSONEditorComponent:

import React from "react";
import JSONEditorComponent from "./JSONEditorComponent";

const App: React.FC = () => {
  const data = {
    "name": "John",
    "age": 30,
    "city": "New York"
  };

  return <JSONEditorComponent jsonData={data} />;
};

export default App;

[bkiggen]

Came to request the same thing. This is a great package - thanks to the devs working on it!

[MarisaCodes]

I had the same problem with React 18 and found this fix:

npm i jsoneditor
npm i --save @types/jsoneditor

Next, here's the JSONEditorComponent:

import React, { useEffect, useRef } from "react";
import JSONEditor, { JSONEditorOptions } from "jsoneditor";
import "jsoneditor/dist/jsoneditor.css";
import { Card } from "primereact/card";

interface JSONEditorComponentProps {
  jsonData: any;
}

const JSONEditorComponent: React.FC<JSONEditorComponentProps> = ({ jsonData }) => {
  const containerRef = useRef<HTMLDivElement | null>(null);
  let jsonEditor: JSONEditor | null = null;

  useEffect(() => {
    if (containerRef.current) {
      const options: JSONEditorOptions = {};
      jsonEditor = new JSONEditor(containerRef.current, options);
      jsonEditor.set(jsonData);
    }

    return () => {
      if (jsonEditor) {
        jsonEditor.destroy();
      }
    };
  }, [jsonData]);

  return (
    <Card>
      <div ref={containerRef} style={{width: '100%', height: '400px'}}/>
    </Card>
  );
};

export default JSONEditorComponent;

In this TypeScript version, we have defined an interface JSONEditorComponentProps for the props that the JSONEditorComponent accepts, and we've used React.FC to define the type of the component. Also, jsonEditor and containerRef variables are defined with their specific types.

Here is how you can use the JSONEditorComponent:

import React from "react";
import JSONEditorComponent from "./JSONEditorComponent";

const App: React.FC = () => {
  const data = {
    "name": "John",
    "age": 30,
    "city": "New York"
  };

  return <JSONEditorComponent jsonData={data} />;
};

export default App;

this was very helpful thanks

[Jezternz]

This almost feels like it should just be a new repo / npm package :D

Thanks for the sample code, working on a slightly modified version that enables you to pass in options, utilize onChange and value in a react controlled input fashion.

[Jezternz]

Ended up just going with a custom js and no longer using jsoneditor-react, can see source here if interested:
https://gist.github.com/Jezternz/fd2edd87f9b31c66eb9258d75afed600

[markAtHub]

I had the same problem with React 18 and found this fix:

npm i jsoneditor
npm i --save @types/jsoneditor

Next, here's the JSONEditorComponent:

import React, { useEffect, useRef } from "react";
import JSONEditor, { JSONEditorOptions } from "jsoneditor";
import "jsoneditor/dist/jsoneditor.css";
import { Card } from "primereact/card";

interface JSONEditorComponentProps {
  jsonData: any;
}

const JSONEditorComponent: React.FC<JSONEditorComponentProps> = ({ jsonData }) => {
  const containerRef = useRef<HTMLDivElement | null>(null);
  let jsonEditor: JSONEditor | null = null;

  useEffect(() => {
    if (containerRef.current) {
      const options: JSONEditorOptions = {};
      jsonEditor = new JSONEditor(containerRef.current, options);
      jsonEditor.set(jsonData);
    }

    return () => {
      if (jsonEditor) {
        jsonEditor.destroy();
      }
    };
  }, [jsonData]);

  return (
    <Card>
      <div ref={containerRef} style={{width: '100%', height: '400px'}}/>
    </Card>
  );
};

export default JSONEditorComponent;

In this TypeScript version, we have defined an interface JSONEditorComponentProps for the props that the JSONEditorComponent accepts, and we've used React.FC to define the type of the component. Also, jsonEditor and containerRef variables are defined with their specific types.

Here is how you can use the JSONEditorComponent:

import React from "react";
import JSONEditorComponent from "./JSONEditorComponent";

const App: React.FC = () => {
  const data = {
    "name": "John",
    "age": 30,
    "city": "New York"
  };

  return <JSONEditorComponent jsonData={data} />;
};

export default App;

Thanks, this was really useful. I've updated it to be able to extract the data out on every keypress:

interface JSONEditorComponentProps {
    jsonData: any;
    onChange: (newJson: string) => void;
}

const JSONEditorComponent: React.FC<JSONEditorComponentProps> = ({ jsonData, onChange }) => {
    const containerRef = useRef<HTMLDivElement | null>(null);
    let jsonEditor: JSONEditor | null = null;

    useEffect(() => {
        if (containerRef.current) {
            const options: JSONEditorOptions = {
                mode: "code",
                onChangeText: (json) => onChange(json)
            };
            jsonEditor = new JSONEditor(containerRef.current, options);
            jsonEditor.set(jsonData);
        }

        return () => {
            if (jsonEditor) {
                jsonEditor.destroy();
            }
        };
    }, [jsonData]);

    return (
        <div ref={containerRef} style={{ width: "100%", height: "400px" }} />
    );
};

export default JSONEditorComponent;