# @lyove/monaco-editor-react > 🌴 Monaco Code Editor for React, without need of configuration files or plugins Latest version **0.0.4** (published 2023-05-25) Β· MIT license Β· 0 weekly downloads ## Install ```sh npm install @lyove/monaco-editor-react pnpm add @lyove/monaco-editor-react yarn add @lyove/monaco-editor-react bun add @lyove/monaco-editor-react ``` ## Health **Score 35/100 (D)** β€” status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; pre 1.0. Negative: abandoned. ## Facts | | | |---|---| | Version | 0.0.4 | | Published | 2023-05-25 | | First published | 2023-05-18 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 5 | | Unpacked size | 497.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | lyove | | Maintainers | lyove | | Keywords | monaco-editor, monaco-editor-react, react-monaco-editor, code-editor | ## Links - npm: https://www.npmjs.com/package/@lyove/monaco-editor-react - Repository: https://github.com/lyove/monaco-editor-react - Homepage: https://github.com/lyove/monaco-editor-react#readme - Issues: https://github.com/lyove/monaco-editor-react/issues - npm.io page: https://npm.io/package/@lyove/monaco-editor-react ## Dependencies (5) - [react](https://npm.io/package/react.md) ^17.0.2 - [lodash](https://npm.io/package/lodash.md) ^4.17.21 - [react-dom](https://npm.io/package/react-dom.md) ^17.0.2 - [classnames](https://npm.io/package/classnames.md) ^2.3.2 - [monaco-editor](https://npm.io/package/monaco-editor.md) ^0.38.0 ## Alternatives - [ext-list](https://npm.io/package/ext-list.md) β€” 6.3M weekly downloads - [@lexical/selection](https://npm.io/package/@lexical/selection.md) β€” 3.8M weekly downloads - [@lexical/text](https://npm.io/package/@lexical/text.md) β€” 3.6M weekly downloads - [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) β€” 3.0M weekly downloads - [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) β€” 3.0M weekly downloads ## Recent versions - 0.0.4 (latest) β€” 2023-05-25 - 0.0.3 β€” 2023-05-19 - 0.0.2 β€” 2023-05-18 - 0.0.1 β€” 2023-05-18 ## README

πŸ’― Monaco-Editor-React

Monaco Code Editor for React, without need of configuration files or plugins [https://monaco-editor-react.netlify.app](https://monaco-editor-react.netlify.app/) ## πŸ’Ž **Using** ### πŸ“Œ BaseEditor ```javascript 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 ( { 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 ```javascript 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 ( ); } } ``` ### 🧩 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](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html) | | 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](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.idiffeditorconstructionoptions.html) | | 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. --- _Source: https://npm.io/package/@lyove/monaco-editor-react Β· Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._