Monaco Editor component for React. demo @jaywcjlove.github.io/react-monacoeditor/
npm install @uiw/react-monacoeditor --save
import React from 'react';
import MonacoEditor from '@uiw/react-monacoeditor';
<MonacoEditor
language="html"
value="<h1>I ♥ react-monacoeditor</h1>"
options={{
theme: 'vs-dark',
}}
/>
import React from 'react';
import { render } from 'react-dom';
import MonacoEditor from '@uiw/react-monacoeditor';
const code = `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',
}}
/>
);
}
}
`;
class App extends React.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() {
const options = {
selectOnLineNumbers: true,
roundedSelection: false,
readOnly: false,
cursorStyle: 'line',
automaticLayout: false,
theme: 'vs-dark',
};
return (
<MonacoEditor
height="500px"
language="javascript"
editorDidMount={this.editorDidMount.bind(this)}
onChange={this.onChange.bind(this)}
value={code}
options={options}
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,
}}
/>
);
}
}
render(
<App />,
document.getElementById('root')
);
Add the Monaco Webpack plugin monaco-editor-webpack-plugin
to your webpack.config.js
:
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
plugins: [
new MonacoWebpackPlugin()
]
};
If you specify value
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 to Monaco 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.
Refer to Monaco interface IEditor.
- react-codemirror: CodeMirror component for React.
Licensed under the MIT License.