# 9.2 XlReactWidgetMonacoEditor

MonacoEditor wrapped with `withEditorResize`, `withoutContextMenu` and `withEditorAutoFocus` hocs.

If automatic resize is not required, use MonacoEditor from `react-monaco-editor` package.

### Summary

* [Exports](#exports)
* [Playground](#playground)
* [Properties](#properties)
* [Example](#example)

### Exports

```
- XlReactWidgetMonacoEditor
```

### Playground

[Monaco editor](https://xebialabs.github.io/xl-react-components/kitchen-sink.html#/widget/widgetMonacoEditor)

### Properties
| Property | Type | Default value | Description |
| --- | --- | --- | --- |
| **resizeFrequency** | Number | 100 |Debounce time (in milliseconds) used inside window resize handler to delay execution of editor resize. |
| **focusOnMount** | Boolean | undefined | Flag which indicates if editor should focus on mount. |

For other properties refer to [react-monaco-editor](https://github.com/react-monaco-editor/react-monaco-editor#react-monaco-editor) 
or [Monaco Editor](https://microsoft.github.io/monaco-editor/) documentation.

:bangbang: **Do not use `automaticLayout` option, `withEditorResize` is supposed to take care of editor resizing.**
### Example

Example of using the component:

```jsx 
import React from 'react';
import {XlReactWidgetMonacoEditor} from 'xl-react-components';

class EditorExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {code: '// type your code...'}
    }

    onChange = (newValue) => {
        this.setState({code: newValue})
    };

    render() {
        const code = this.state.code;
        const options = {
            selectOnLineNumbers: true
        };

        return (
            <XlReactWidgetMonacoEditor
                language="javascript"
                theme="vs-dark"
                value={code}
                options={options}
                onChange={this.onChange}
            />
        );
    }
}
```
