react-editor-z

A customizable React wrapper component built on top of @monaco-editor/react — with default JSON mode.

🔍 JSON mode with built-in validation 📦 Access to internal editor ref

---

🚀 Live Demo

👉 Codesandbox Example

---

📦 Installation

npm install react-editor-z
# or
yarn add react-editor-z

Import the module in the place you want to use:

import CodeEditor from "react-editor-z";

Snippet

    function App() {
      return (
        <CodeEditor
          // language="json"
          // value={value}
          // onChange={(val) => setValue(val)}
          height="240px"
        />
      );
    }

---

🔧 Props

react-editor-z extends EditorProps from @monaco-editor/react.

Prop	Type	Description
readOnly	boolean	If true, the editor will be in read-only mode.
rawJson	boolean	If true, raw JSON is returned in onChange even if invalid.
style	React.CSSProperties	Inline styles applied to the editor container.
getRefs	(refsEditor: React.MutableRefObject<any>) => any	Callback to access internal editor refs.
onChange	(value?: string | any, error?: boolean) => any	Called on content change; includes error flag if JSON parsing fails.

RUN

LIVE EXAMPLE

📝 License

MIT