💯 Monaco-Editor-React

Monaco Code Editor for React, without need of configuration files or plugins

https://monaco-editor-react.netlify.app

💎 Using

📌 BaseEditor

import React from "react";
import MonacoEditor from "@lyove/monaco-editor-react";

const exampleCode = `console.log('Hello @lyove/monaco-editor-react');`

export default class CodeEditor extends React.PureComponent {
  render() {
    return (
      <MonacoEditor
        width={1000}
        height={400}
        language="javascript"
        value={exampleCode}
        theme="vs"
        supportFullScreen={true}
        options={{
          fontSize: 13,
          fontFamily: 'Menlo, Monaco, "Courier New", monospace',
          minimap: {
            enabled: true,
          },
          automaticLayout: true,
          formatOnPaste: true,
          scrollbar: {
            useShadows: false,
            verticalScrollbarSize: 10,
            horizontalScrollbarSize: 10,
          },
        }}
        monacoWillMount={(monaco) => {
          console.log("monaco：", monaco);
        }}
        editorDidMount={(editor, monaco) => {
          console.log("editor：", editor);
        }}
        onChange={(value: string | null) => {
          console.log("editor value:\n", value);
        }}
        // monacoPath="https://cdn.jsdelivr.net/npm/monaco-editor@0.38.0/min/vs"
      />
    );
  }
}

📌 DiffEditor

import React from "react";
import { DiffEditor } from "@lyove/monaco-editor-react";

const originalCode = `npm install monaco-editor`
const modifiedCode = `npm install @lyove/monaco-editor-react`

export default class CodeDiffEditor extends React.PureComponent {
  render() {
    return (
      <DiffEditor
        width={600}
        height={400}
        original={originalCode}
        modified={modifiedCode}
        language="markdown"
      />
    );
  }
}

🧩 Editor Props

Name	Type	Default	Description
value	string	null	editor value
width	number	null	editor width
height	number	null	editor height
language	string	null	editor language
theme	string	vs	vs, vs-dark, active4d, clouds, chrome, monokai, solarized-dark, solarized-light
options	object	null	IEditorOptions
bordered	boolean	true	need bordered ?
className	string	null	wrapper class name
onChange	func	(value) => void	triggered when the editor value changes
monacoWillMount	func	(monaco) => void	triggered when the monaco will mounted
editorDidMount	func	(editor: MonacoEditor.editor, monaco: any) => void	triggered when the editor did mounted
monacoPath	string	"https://unpkg.com/monaco-editor@0.38.0/min/vs"	custom cdn path, notice: monacoPath such as: "https://your-custom-cdn-path/monaco-editor@version/min/vs", the end of the path can only be "/monaco-editor@version/min/vs", no need for "/xxx.js"

🧩 DiffEditor Props

Name	Type	Default	Description
original	string	null	diff editor original value
modified	string	null	diff editor modified value
width	number	null	diff editor width
height	number	null	diff editor height
language	string	null	diff editor language
originalLanguage	string	null	diff editor original language
modifiedLanguage	string	null	diff editor modified language
theme	string	vs	vs, vs-dark, active4d, clouds, chrome, monokai, solarized-dark, solarized-light
options	object	null	IDiffEditorOptions
className	string	null	wrapper class name
monacoWillMount	func	(monaco) => void	triggered when the monaco will mounted
editorDidMount	func	(original: MonacoEditor.editor.ITextModel, modified: MonacoEditor.editor.ITextModel, editor: MonacoEditor.editor, monaco: any) => void	triggered when the diff editor did mounted
onChange	(value: string) => void	null	modified model content change
monacoPath	string	"https://unpkg.com/monaco-editor@0.38.0/min/vs"	custom cdn path, notice: monacoPath such as: "https://your-custom-cdn-path/monaco-editor@version/min/vs", the end of the path can only be "/monaco-editor@version/min/vs", no need for "/xxx.js"

📋 License

Licensed under the MIT License.