## Examples
To build the examples locally, run:
```bash
yarn
cd example
yarn
yarn start
```
Then open `http://localhost:8886` in a browser.
## Installation
```bash
yarn add react-monaco-editor
```
## Using with Webpack
```js
import React from 'react';
import { createRoot } from "react-dom/client";
import MonacoEditor from 'react-monaco-editor';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
code: '// type your code...',
}
}
editorDidMount(editor, monaco) {
console.log('editorDidMount', editor);
editor.focus();
}
onChange(newValue, e) {
console.log('onChange', newValue, e);
}
render() {
const code = this.state.code;
const options = {
selectOnLineNumbers: true
};
return (
);
}
}
const container = document.getElementById('root');
const root = createRoot(container);
root.render();
```
Add the [Monaco Webpack plugin](https://github.com/Microsoft/monaco-editor-webpack-plugin) `monaco-editor-webpack-plugin` to your `webpack.config.js`:
```js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
plugins: [
new MonacoWebpackPlugin({
// available options are documented at https://github.com/microsoft/monaco-editor/blob/main/webpack-plugin/README.md#options
languages: ['json']
})
]
};
```
Sidenote: Monaco Editor uses CSS imports internally, so if you're using CSS Modules in your project - you're likely to get conflict by default. In order to avoid that - separate css-loader for app and monaco-editor package:
```js
// Specify separate paths
const path = require('path');
const APP_DIR = path.resolve(__dirname, './src');
const MONACO_DIR = path.resolve(__dirname, './node_modules/monaco-editor');
{
test: /\.css$/,
include: APP_DIR,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader',
options: {
modules: true,
namedExport: true,
},
}],
}, {
test: /\.css$/,
include: MONACO_DIR,
use: ['style-loader', 'css-loader'],
}
```
## Properties
All the properties below are optional.
- `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
- `options` refer to [Monaco interface IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneEditorConstructionOptions.html).
- `overrideServices` refer to [Monaco Interface IEditorOverrideServices](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IEditorOverrideServices.html). It depends on Monaco's internal implementations and may change over time, check github [issue](https://github.com/Microsoft/monaco-editor/issues/935#issuecomment-402174095) for more details.
- `onChange(newValue, event)` an event emitted when the content of the current model has changed.
- `editorWillMount(monaco)` an event emitted before the editor mounted (similar to `componentWillMount` of React).
- `editorDidMount(editor, monaco)` an event emitted when the editor has been mounted (similar to `componentDidMount` of React).
- `editorWillUnmount(editor, monaco)` an event emitted before the editor unmount (similar to `componentWillUnmount` of React).
## Events & Methods
Refer to [Monaco interface IEditor](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditor.html).
The monaco interfaces available by import
```js
import { monaco } from 'react-monaco-editor';
```
## Q & A
### I don't get syntax highlighting / autocomplete / validation.
Make sure to use the [Monaco Webpack plugin](https://github.com/Microsoft/monaco-editor-webpack-plugin) or follow the [instructions on how to load the ESM version of Monaco](https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-esm.md).
### How to interact with the MonacoEditor instance
Using the first parameter of `editorDidMount`, or using a `ref` (e.g. ``).
```js
const monacoEditorRef = useRef(null);
return (<>
)
```
### How to get value of editor
Using `this.refs.monaco.editor.getValue()` or via method of `Model` instance:
```js
const model = this.refs.monaco.editor.getModel();
const value = model.getValue();
```
### Do something before editor mounted
For example, you may want to configure some JSON schemas before editor mounted, then you can go with `editorWillMount(monaco)`:
```js
class App extends React.Component {
editorWillMount(monaco) {
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
validate: true,
schemas: [{
uri: "http://myserver/foo-schema.json",
fileMatch: ['*'],
schema: {
type: "object",
properties: {
p1: {
enum: [ "v1", "v2"]
},
p2: {
$ref: "http://myserver/bar-schema.json"
}
}
}
}]
});
}
render() {
return (
);
}
}
```
### Use multiple themes
[Monaco only supports one theme](https://github.com/Microsoft/monaco-editor/issues/338).
### How to use the diff editor
```js
import React from 'react';
import { MonacoDiffEditor } from 'react-monaco-editor';
class App extends React.Component {
render() {
const code1 = "// your original code...";
const code2 = "// a different version...";
const options = {
//renderSideBySide: false
};
return (
);
}
}
```
### Usage with `create-react-app`
The easiest way to use the `react-monaco-editor` with `create-react-app` is to use the [react-app-rewired](https://github.com/timarney/react-app-rewired) project. For setting it up, the following steps are required:
1. Install `react-app-rewired`: `npm install -D react-app-rewired`
2. Replace `react-scripts` by `react-app-rewired` in the scripts section of your `packages.json`
2. Create a `config-overrides.js` in the root directory of your project with the following content:
```javascript
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = function override(config, env) {
config.plugins.push(new MonacoWebpackPlugin({
languages: ['json']
}));
return config;
}
```
For more information checkout the documentation of `react-app-rewired` [here](https://github.com/timarney/react-app-rewired).
# License
MIT, see the [LICENSE](/LICENSE.md) file for detail.
---
_Source: https://npm.io/package/react-monaco-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
