Monaco editor dynamically resizable

TL;DR: add automaticLayout: true to your editor’s configuration.

NL;PR:

Monaco has a built-in auto resize to parent container functionality:

    createEditorWithAutoResize(){
      this.editor = monaco.editor.create(
            this.editorDiv.current, {
            value: "var x = 0;",
            language: 'javascript',
            automaticLayout: true // <<== the important part
       }
      );
    }
    componentDidMount(){this.createEditorWithAutoResize();}
    constructor(props){super(props); this.editorDiv = React.createRef();}
    render(){return <div ref={this.editorDiv} className="editor" ></div>}

And the CSS for the editor (it avoids rendering the editor for the first time with like 10px height):

    .editor{
     height: 100%;
    } 

First tested: v0.10.1, Last tested: v0.32.1

Note:
< v0.20.0: The mechanism does not listen to its container size changes, it polls them.

@nrayburn-tech (Monaco Editor’s contributor): Version 0.20 uses MutationObserver for all browsers. Version 0.21 and later uses ResizeObserver on supported browsers, otherwise, it uses polling as a fallback.