UIKIT REACT Window resize

by Greggg

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/js/uikit.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<div id="container"></div>

Babel + JSX

var Tab = React.createClass({
	render(){return <div>I am a table</div> }
});
var Acc = React.createClass({
	render(){return <div>I am an accordion for small width</div> }
});

var Box = React.createClass({
  getInitialState: function() {
    return {windowWidth: window.innerWidth};
  },

  handleResize: function(e) {
    this.setState({windowWidth: window.innerWidth});
  },

  componentDidMount: function() {
    window.addEventListener('resize', this.handleResize);
  },

  componentWillUnmount: function() {
    window.removeEventListener('resize', this.handleResize);
  },

  render: function() {
  	var Comp = this.state.windowWidth > 480 ? Tab : Acc;
    return <div>Resize your brower window. Current window width: {this.state.windowWidth} px <Comp/></div>
  }
});


ReactDOM.render(
  <Box />,
  document.getElementById('container')
);