{"id":13422159,"url":"https://github.com/uiwjs/react-monacoeditor","last_synced_at":"2025-03-15T10:31:43.022Z","repository":{"id":33117784,"uuid":"142203004","full_name":"uiwjs/react-monacoeditor","owner":"uiwjs","description":"Monaco Editor component for React.","archived":false,"fork":false,"pushed_at":"2025-01-19T20:12:57.000Z","size":261828,"stargazers_count":305,"open_issues_count":23,"forks_count":26,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-09T20:29:36.758Z","etag":null,"topics":["editor","ide","monaco-editor","react","react-monacoeditor","vscode"],"latest_commit_sha":null,"homepage":"https://uiwjs.github.io/react-monacoeditor/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/uiwjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"ko_fi":"jaywcjlove","buy_me_a_coffee":"jaywcjlove","custom":["https://www.paypal.me/kennyiseeyou","https://jaywcjlove.github.io/#/sponsor"]}},"created_at":"2018-07-24T19:19:40.000Z","updated_at":"2025-03-06T23:35:15.000Z","dependencies_parsed_at":"2022-06-28T12:00:39.326Z","dependency_job_id":"a44e2436-cce1-4bac-95e8-31e9c34ca6e9","html_url":"https://github.com/uiwjs/react-monacoeditor","commit_stats":{"total_commits":243,"total_committers":8,"mean_commits":30.375,"dds":0.3374485596707819,"last_synced_commit":"f3b05707534aba2cce0515a6a2027f2fbc32616a"},"previous_names":["uiwjs/react-monacoeditor","jaywcjlove/react-monacoeditor"],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Freact-monacoeditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Freact-monacoeditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Freact-monacoeditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Freact-monacoeditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uiwjs","download_url":"https://codeload.github.com/uiwjs/react-monacoeditor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243419072,"owners_count":20287805,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","ide","monaco-editor","react","react-monacoeditor","vscode"],"created_at":"2024-07-30T23:00:38.266Z","updated_at":"2025-03-15T10:31:42.560Z","avatar_url":"https://github.com/uiwjs.png","language":"TypeScript","readme":"react-monacoeditor\n===\n\n[![CI](https://github.com/uiwjs/react-monacoeditor/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-monacoeditor/actions/workflows/ci.yml)\n[![jsDelivr CDN](https://data.jsdelivr.com/v1/package/npm/@uiw/react-monacoeditor/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@uiw/react-monacoeditor)\n[![Downloads](https://img.shields.io/npm/dm/@uiw/react-monacoeditor.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-monacoeditor)\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-monacoeditor/file/README.md)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-monacoeditor.svg)](https://www.npmjs.com/package/@uiw/react-monacoeditor)\n\n[Monaco Editor](https://github.com/Microsoft/monaco-editor) component for React. demo @[uiwjs.github.io/react-monacoeditor/](https://uiwjs.github.io/react-monacoeditor/)  \n\n\u003c!--rehype:ignore:start--\u003e\n\u003ca href=\"https://uiwjs.github.io/react-monacoeditor/\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/jaywcjlove/react-monacoeditor/master/react-monacoeditor.png\" /\u003e\u003c/a\u003e\n\n\u003c!--rehype:ignore:end--\u003e\n\u003c!--dividing--\u003e\n\n## Installation\n\n```bash\nnpm install @uiw/react-monacoeditor --save\n```\n\n## Using\n\n[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-monacoeditor-example-hgqfj?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n```jsx mdx:preview\nimport React from 'react';\nimport MonacoEditor from '@uiw/react-monacoeditor';\n\nexport default function Demo() {\n  return (\n    \u003cMonacoEditor\n      language=\"html\"\n      value=\"\u003ch1\u003eI ♥ react-monacoeditor\u003c/h1\u003e\"\n      height=\"300px\"\n      options={{\n        theme: 'vs-dark',\n      }}\n    /\u003e\n  );\n}\n```\n\n## Using with Webpack\n\n```javascript\nimport React from 'react';\nimport { render } from 'react-dom';\nimport MonacoEditor from '@uiw/react-monacoeditor';\n\nconst code = `import React, { PureComponent } from 'react';\nimport MonacoEditor from '@uiw/react-monacoeditor';\n\nexport default class App extends PureComponent {\n  render() {\n    return (\n      \u003cMonacoEditor\n        language=\"html\"\n        value=\"\u003ch1\u003eI ♥ react-codemirror2\u003c/h1\u003e\"\n        options={{\n          selectOnLineNumbers: true,\n          roundedSelection: false,\n          cursorStyle: 'line',\n          automaticLayout: false,\n          theme: 'vs-dark',\n        }}\n      /\u003e\n    );\n  }\n}\n`;\n\nclass App extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      code: '// type your code...',\n    }\n  }\n  editorDidMount(editor, monaco) {\n    console.log('editorDidMount', editor, monaco);\n    editor.focus();\n  }\n  onChange(newValue, e) {\n    console.log('onChange', newValue, e);\n  }\n  render() {\n    const options = {\n      selectOnLineNumbers: true,\n      roundedSelection: false,\n      readOnly: false,\n      cursorStyle: 'line',\n      automaticLayout: false,\n      theme: 'vs-dark',\n      scrollbar: {\n        // Subtle shadows to the left \u0026 top. Defaults to true.\n        useShadows: false,\n        // Render vertical arrows. Defaults to false.\n        verticalHasArrows: true,\n        // Render horizontal arrows. Defaults to false.\n        horizontalHasArrows: true,\n        // Render vertical scrollbar.\n        // Accepted values: 'auto', 'visible', 'hidden'.\n        // Defaults to 'auto'\n        vertical: 'visible',\n        // Render horizontal scrollbar.\n        // Accepted values: 'auto', 'visible', 'hidden'.\n        // Defaults to 'auto'\n        horizontal: 'visible',\n        verticalScrollbarSize: 17,\n        horizontalScrollbarSize: 17,\n        arrowSize: 30,\n      },\n    };\n    return (\n      \u003cMonacoEditor\n        height=\"500px\"\n        language=\"javascript\"\n        editorDidMount={this.editorDidMount.bind(this)}\n        onChange={this.onChange.bind(this)}\n        value={code}\n        options={options}\n      /\u003e\n    );\n  }\n}\n\nrender(\n  \u003cApp /\u003e,\n  document.getElementById('root')\n);\n```\n\nAdd the [Monaco Editor Webpack Loader Plugin](https://github.com/microsoft/monaco-editor/tree/main/webpack-plugin) `monaco-editor-webpack-plugin` to your `webpack.config.js`:\n\n```js\nconst MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');\nmodule.exports = {\n  plugins: [\n    new MonacoWebpackPlugin()\n  ]\n};\n```\n\n## Properties\n\nIf you specify `value` property, the component behaves in controlled mode.\nOtherwise, it behaves in uncontrolled mode.\n\n- `width` width of editor. Defaults to `100%`.\n- `height` height of editor. Defaults to `100%`.\n- `value` value of the auto created model in the editor.\n- `defaultValue` the initial value of the auto created model in the editor.\n- `language` the initial language of the auto created model in the editor.\n- `theme` the theme of the editor `vs`, `vs-dark`, `hc-black`\n- `options` refer to [Monaco interface IEditorConstructionOptions](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IEditorConstructionOptions.html).\n- `editorDidMount(editor, monaco)` an event emitted when the editor has been mounted (similar to `componentDidMount` of React).\n- `onChange(newValue, event)` an event emitted when the content of the current model has changed.\n- `autoComplete?: (model: monaco.editor.ITextModel, position: monaco.Position) =\u003e languages.CompletionItem[];` User provided extension function provider for auto-complete. [#47](https://github.com/uiwjs/react-monacoeditor/pull/47)\n\n## Events \u0026 Methods\n\nRefer to [Monaco interface IEditor](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IEditor.html).\n\n### Related\n\n- [@uiw/react-textarea-code-editor](https://github.com/uiwjs/react-textarea-code-editor): A simple code editor with syntax highlighting.\n- [@uiw/react-codemirror](https://github.com/uiwjs/react-codemirror): CodeMirror component for React. @codemirror\n- [@uiw/react-markdown-editor](https://github.com/uiwjs/react-markdown-editor): A markdown editor with preview, implemented with React.js and TypeScript.\n- [@uiw/react-md-editor](https://github.com/uiwjs/react-md-editor): A simple markdown editor with preview, implemented with React.js and TypeScript.\n- [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview): React component preview markdown text in web browser. \n- [Nginx Editor](https://github.com/jaywcjlove/nginx-editor) Nginx language for Monaco Editor.\n\n## Contributors\n\nAs always, thanks to our amazing contributors!\n\n\u003ca href=\"https://github.com/uiwjs/react-monacoeditor/graphs/contributors\"\u003e\n  \u003cimg src=\"https://uiwjs.github.io/react-monacoeditor/CONTRIBUTORS.svg\" /\u003e\n\u003c/a\u003e\n\nMade with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).\n\n## License\n\nLicensed under the MIT License.\n","funding_links":["https://ko-fi.com/jaywcjlove","https://buymeacoffee.com/jaywcjlove","https://www.paypal.me/kennyiseeyou","https://jaywcjlove.github.io/#/sponsor"],"categories":["Editor Components","UI Components"],"sub_categories":["Form Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuiwjs%2Freact-monacoeditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuiwjs%2Freact-monacoeditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuiwjs%2Freact-monacoeditor/lists"}