Needs examples for responsive layout

[illeatmyhat]

React-Ace seems to use the width and height props to determine a lot of things (i.e. scrolling), and this seems to imply that it is difficult for the project to get rid of them.

As an alternative, there needs to be some canonical example of how to embed a React-Ace editor inside of a responsive layout, with resizing containers and elements.

I've gotten it to work using ResizeObservers. It goes something like this:

class Editor extends Component {
   state = { 'height': null }
   componentDidMount() {
      new ResizeObserver(() => {
         this.setState({
            'height': this.parent.offsetHeight - this.navbar.offsetHeight
         })
      }).observe(this.parent) // or this.header, or anything else
   }
   render() {
      return (
         // container is 100% height/width
         <some-container ref={(elem) => this.parent = elem}>
            // header is height of content
            <some-header ref={(elem) => this.header = elem}>foobar</some-header>
            <AceEditor
               className="editor"
               // ...
               height={`${this.state.height}px`}/>
         </some-container>
      );
   }
}

[bebraw]

If you are using a modern browser, in some cases using vh and vw can help to widths and heights responsive.