How to implement dynamic sizing of Monaco editor using react-monaco-editor?

Question

I am working on viewing docs using react-monaco-editor library in a react application.

The code looks like this for specific height and width:

import MonacoEditor from 'react-monaco-editor';


class DocView extends React.Component<any, any> {
  constructor(props){
    super(props);
  }

  onChange(newValue, e) {
    console.log('onChange', newValue, e);
  }

  public render(): JSX.Element {
    const {t} = this.props;
    const options = {
      selectOnLineNumbers: true,
      readOnly: true,
    };
    
    return (
      <>
      ...
      <div>
        <MonacoEditor
          width={900}
          height={420}
          language="yaml"
          theme="vs-dark"
          defaultValue=''
          options={options}
          value={this.props.code}
          onChange={this.onChange}
        />
      </div>
       ...
      </>
    );
  }
}

I want to change the width and height according to window size. How can I achieve this?

I have seen multiple answers related to monaco-editor but none was explicitly using react-monaco-editor.

Thanks for any pointers.

Answer 1

The width and height properties support all HTML parameter values as strings. They default to 100% to fill the entire available space. With that you can wrap the editor into a div for which you set a specific dynamic size or let it take part in a grid or box layout.