@lyove/monaco-editor-react v0.0.4

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

🧩 DiffEditor Props

📋 License

Licensed under the MIT License.