Rearrange react components on resize

Rearrange react components on resize
0

#1

Is this even possible?
I have this in constructor:

this.myInput = React.createRef();

and this:

componentDidMount () {
		this.setState({
			myWidth: this.state.myWidth=this.myInput.current.offsetWidth
		});
    }

and this in Render():

render(){
	
	const btnText = this.state.erase ? "Populate" : "Erase" ;
	const handleClick = e => this.fullScreen(e.target.id);
	
	const EditorHead1 = <EditorHead id={"item1"} style={this.state.stilEditor} className={this.state.headEdKlasa} onClick={handleClick} title={this.state.attr}/>;
	const PreviewHead1 = <PreviewHead id={"item2"} style={this.state.stilPreview} className={this.state.headViewKlasa} onClick={handleClick} title={this.state.attr}/>;
	const BtnEraser1 = <BtnEraser id={"eraser"} onClick={this.eraseFields} type={"button"} className={"btn btn-danger btn-lg"} title={"Erase & populate both fields"} value={btnText}/>;
	const Editor1 = <Editor id={"editor"} onChange={this.handleChange} className={this.state.editorKlasa} value={this.state.markdown} placeholder={"Enter ... some kind a text!? ..."} title={"This is rather obvious isnt it? Its editor window Sherlock :D"}/>;
	const Preview1 = <Preview id={"preview"} className={this.state.previewKlasa} dangerouslySetInnerHTML={{__html: marked(this.state.markdown, { renderer: renderer })}} title={"Its a preview window, Sherlock ;)"}/>;
	const Arrow1 = <Arrow id={"arrow"}/>;

	if(this.state.myWidth<=768){
		alert("Alternative");
		alert(this.state.myWidth);
		return (
				
			<div id="inner2" ref={this.myInput} className="grid-container animated zoomIn" style={{height: this.state.inner2H}} onDoubleClick={this.inner2Height}>
				
				{EditorHead1}
				{Editor1}
				{PreviewHead1}
				{Preview1}
				{BtnEraser1}
				{Arrow1}
				
			</div>
					
		);
	}
	if(this.state.myWidth>768){
		alert("Normal");
		alert(this.state.myWidth);
		return (
				
			<div id="inner2" ref={this.myInput} className="grid-container animated zoomIn" style={{height: this.state.inner2H}} onDoubleClick={this.inner2Height}>
				
				{EditorHead1}
				{PreviewHead1}
				{BtnEraser1}
				{Editor1}
				{Preview1}
				{Arrow1}
				
			</div>
					
		);
	}
	}

Currently rearranging only works if you, after resize, refresh browser or “run” again codepen.


#2

You need an event listener on page resize event, at the minute nothing you’ve posted will trigger the event needed to rearrange anything (note it’s probably easier to do this entirely in CSS as you avoid that issue)


#3

I just found it. And implemented it successfully :smiley: Here’s a pen of project in which i tried to do that. Thanks.