^{Using my app is also a way to support me:}

---

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 the Monaco Editor Webpack Loader Pluginmonaco-editor-webpack-plugin to your webpack.config.js:

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

Properties

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

• width width of editor. Defaults to 100%.
• height height of editor. Defaults to 100%.
• 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 editor vs, vs-dark, hc-black
• options refer to Monaco interface IEditorConstructionOptions.
• editorDidMount(editor, monaco) an event emitted when the editor has been mounted (similar to componentDidMount 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 to Monaco interface IEditor.

Related

• @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.

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

Licensed under the MIT License.