# 9.1 XlReactWidgetMonacoDiffViewer

MonacoDiffEditor wrapped with `withEditorResize` hoc.

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

### Summary

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

### Exports

```
- XlReactWidgetMonacoDiffViewer
```

### Playground

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

### Properties
| Property | Type | Default value | Description |
| --- | --- | --- | --- |
| **resizeFrequency** | Number | 100 |Debounce time (in milliseconds) used inside window resize handler to delay execution of editor resize. |

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 {XlReactWidgetMonacoDiffViewer} from 'xl-react-components';

export class EditorExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            original: 'const a = "original_value";',
            value: 'const a = "changed_value";'
        };
    }

    render() {
        const {original, value} = this.state;

        const options = {readOnly: true};

        return <XlReactWidgetMonacoDiffViewer
            language="javascript"
            options={options}
            original={original}
            theme="vs-dark"
            value={value}
        />;
    }
}
```
