Golang React JS Technology Blog

Component displays Height and Width on window resize

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script data-require="babel@*" data-semver="5.6.15" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script data-require="react@*" data-semver="0.13.3" src="https://fb.me/react-0.14.3.min.js"></script>
</head>

<body>
	<div id="react-container"></div>
</body>

<script type="text/babel">
var WindowDimensions = React.createClass({
    render: function() {
        return <span>{this.state.width} x {this.state.height}</span>;
    },
    updateDimensions: function() {
        this.setState({width: $(window).width(), height: $(window).height()});
    },
    componentWillMount: function() {
        this.updateDimensions();
    },
    componentDidMount: function() {
        window.addEventListener("resize", this.updateDimensions);
    },
    componentWillUnmount: function() {
        window.removeEventListener("resize", this.updateDimensions);
    }
});


React.render(<WindowDimensions />, document.getElementById('react-container'));
</script>

</html>
Most Helpful This Week
Create Functional Component using ES6 Arrow Syntax Loop inside React JSX Glyphicon Rating Star component React Static Website with Material UI theme How to pass data from child component to its parent in ReactJS? React JS onClick event handler