Am unable to increase Height of Codemirror React Component - reactjs

Question

In my React application, I am using 'Editor.jsx component (which is just a wrapper around code-mirror, in case I need to provide frills around the actual CodeMirror-view).
The in which the rendered component from attached file is added to, has height of 100% and other components similar to CodeMirror do use that full height.
The CodeMirror component however only shows 15 lines (and i have to scroll to get to the ones below).
The code is very similar to the sample from github. The height property in getInitialState() also has no effect (neither does the containing ).
import React from 'react';
var CodeMirror = require('react-codemirror');
// fishing this 'require' out has caused severe headache and cost time.
// IF not included, default bootstrap style used. must override it with this.
// but for react-codemirror component we need this one!!!
// REF http://dorianpula.ca/2015/10/07/adding-a-code-editor-to-rookeries/
require("codemirror/lib/codemirror.css");
require('codemirror/mode/javascript/javascript');
require('codemirror/mode/python/python');
var DFLTS = {
javascript: 'var component = {\n\tname: "react-codemirror",\n\tauthor: "Jed Watson",\n\tforUseBy: "KB"}',
python: 'print "hello python world"'
}
export default React.createClass ({
localOnCodeChange(newCode) {
this.props.onCodeChange(newCode)
},
getInitialState() {
return {
code: DFLTS.javascript,
readOnly: false,
mode: 'javascript',
height:"100%",
viewportMargin: "Infinity"
};
},
componentDidMount() {
CodeMirror.setSize("100%", 1000);
},
changeMode(e) {
// add python later.
// no-op
},
toggleRreadOnly() {
this.setState({
readOnly: !this.state.readOnly
}, () => this.refs.editor.focus());
},
interact(cm) {
console.log(cm.getValue());
},
render() {
var options = {
lineNumbers: true,
readOnly: this.state.readOnly,
mode: this.state.mode
};
return (
<CodeMirror ref="editor" value={this.props.code} onChange={this.props.onCodeChange} options={options} interact={this.interact}/>
)
}
});
Any pointers, greatly appreciated.

Answer 1

The .CodeMirror class in this library appears to have a hard-coded height: 300px in it and there's an unanswered question in their issues about being able to set the height. If you put .CodeMirror { min-height: 100% } in your CSS that might do the trick.
Alternatively pass a className to <CodeMirror> (it will get added to the classes) that sets a min height, or a height with !important, or just greater specificity.
(Tsk tsk to components that you have to fight with :))

Answer 2

if you need to dynamically change the height, or simply dont want to use css you can use ref
const codemirrorRef = React.useRef();
React.useEffect(() => {
const current = codemirrorRef.current.editor.display.wrapper.style.height = "1000px";
});
<CodeMirror
[...]
ref={codemirrorRef}
/>
codemirrorRef.current.editor.display.wrapper contains the div element. From there you can do anything you would do if you did document.getElementById('#id')

Answer 3

I was able to get the height to override by adding an addition to the existing CodeMirror class in my CSS file as follows:
.CodeMirror {
height: 100% !important
}
it only applied the change after adding !important to force it to override the existing class which is hard coded to 300 pixels.