Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 252 Commits
.github		.github
core		core
www		www
.gitignore		.gitignore
.lintstagedrc		.lintstagedrc
.prettierignore		.prettierignore
.prettierrc		.prettierrc
LICENSE		LICENSE
README.md		README.md
lerna.json		lerna.json
package.json		package.json
react-monacoeditor.png		react-monacoeditor.png
renovate.json		renovate.json
tsconfig.json		tsconfig.json

Repository files navigation

react-monacoeditor

Monaco Editor component for React. demo @uiwjs.github.io/react-monacoeditor/

Installation

npm install @uiw/react-monacoeditor --save

Using

importReactfrom'react';importMonacoEditorfrom'@uiw/react-monacoeditor';exportdefaultfunctionDemo(){return(<MonacoEditorlanguage="html"value="<h1>I ♥ react-monacoeditor</h1>"height="300px"options={{theme:'vs-dark',}}/>);}

Using with Webpack

importReactfrom'react';import{render}from'react-dom';importMonacoEditorfrom'@uiw/react-monacoeditor';constcode=`import React, { PureComponent } from 'react';import MonacoEditor from '@uiw/react-monacoeditor';export default class App extends PureComponent {  render() {    return (      <MonacoEditor        language="html"        value="<h1>I ♥ react-codemirror2</h1>"        options={{          selectOnLineNumbers: true,          roundedSelection: false,          cursorStyle: 'line',          automaticLayout: false,          theme: 'vs-dark',        }}      />    );  }}`;classAppextendsReact.Component{constructor(props){super(props);this.state={code:'// type your code...',}}editorDidMount(editor,monaco){console.log('editorDidMount',editor,monaco);editor.focus();}onChange(newValue,e){console.log('onChange',newValue,e);}render(){constoptions={selectOnLineNumbers:true,roundedSelection:false,readOnly:false,cursorStyle:'line',automaticLayout:false,theme:'vs-dark',scrollbar:{// Subtle shadows to the left & top. Defaults to true.useShadows:false,// Render vertical arrows. Defaults to false.verticalHasArrows:true,// Render horizontal arrows. Defaults to false.horizontalHasArrows:true,// Render vertical scrollbar.// Accepted values: 'auto', 'visible', 'hidden'.// Defaults to 'auto'vertical:'visible',// Render horizontal scrollbar.// Accepted values: 'auto', 'visible', 'hidden'.// Defaults to 'auto'horizontal:'visible',verticalScrollbarSize:17,horizontalScrollbarSize:17,arrowSize:30,},};return(<MonacoEditorheight="500px"language="javascript"editorDidMount={this.editorDidMount.bind(this)}onChange={this.onChange.bind(this)}value={code}options={options}/>);}}render(<App/>,document.getElementById('root'));

Add theMonaco Editor Webpack Loader Pluginmonaco-editor-webpack-plugin to yourwebpack.config.js:

constMonacoWebpackPlugin=require('monaco-editor-webpack-plugin');module.exports={plugins:[newMonacoWebpackPlugin()]};

Properties

If you specifyvalue property, the component behaves in controlled mode.Otherwise, it behaves in uncontrolled mode.

width width of editor. Defaults to100%.
height height of editor. Defaults to100%.
value value of the auto created model in the editor.
defaultValue the initial value of the auto created model in the editor.
language the initial language of the auto created model in the editor.
theme the theme of the editorvs,vs-dark,hc-black
options refer toMonaco interface IEditorConstructionOptions.
editorDidMount(editor, monaco) an event emitted when the editor has been mounted (similar tocomponentDidMount of React).
onChange(newValue, event) an event emitted when the content of the current model has changed.
autoComplete?: (model: monaco.editor.ITextModel, position: monaco.Position) => languages.CompletionItem[]; User provided extension function provider for auto-complete.#47

Events & Methods

Refer toMonaco interface IEditor.

@uiw/react-textarea-code-editor: A simple code editor with syntax highlighting.
@uiw/react-codemirror: CodeMirror component for React. @codemirror
@uiw/react-markdown-editor: A markdown editor with preview, implemented with React.js and TypeScript.
@uiw/react-md-editor: A simple markdown editor with preview, implemented with React.js and TypeScript.
@uiw/react-markdown-preview: React component preview markdown text in web browser.
Nginx Editor Nginx language for Monaco Editor.