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
How to create simple React Router to navigate multiple pages? Example of React Bootstrap Datatable 3 Different Examples - How State Works in React? React Elements Integrate Bootstrap with ReactJS Application How to use function inside JSX expression? How to use React-Bootstrap component? How to get a clicked HTML element in React? How to render one component in another component in React JS? What is state in React?