Reactjs - Rerender on browser resize


How can I get React to re-render the view when the browser window is resized?


I have some blocks that I want to layout individually on the page, however I also want them to update when the browser window changes. The very end result will be something like Ben Holland's pinterest layout, but written using React not just jquery. I'm still a way off.


Here's my app:

var MyApp = React.createClass({
  //does the http get from the server
  loadBlocksFromServer: function() {
      url: this.props.url,
      dataType: 'json',
      mimeType: 'textPlain',
      success: function(data) {
  getInitialState: function() {
    return {data: []};
  componentWillMount: function() {

  render: function() {
    return (
      <Blocks data={}/>

  <MyApp url="url_here"/>,

Then I have the Block component (equivalent to a Pin in the above Pinterest example):

var Block = React.createClass({
  render: function() {
    return (
        <div class="dp-block" style={{left:, top: this.props.left}}>

and the list/collection of Blocks:

var Blocks = React.createClass({

  render: function() {

    //I've temporarily got code that assigns a random position
    //See inside the function below...

    var blockNodes = (block) {   
      //temporary random position
      var topOffset = Math.random() * $(window).width() + 'px'; 
      var leftOffset = Math.random() * $(window).height() + 'px'; 
      return <Block order={} title={block.summary} left={leftOffset} top={topOffset}>{block.description}</Block>;

    return (


Should I add jquery's window resize, if so where?

$( window ).resize(function() {
  // re-render the component

Is there a more "React" way of doing this?

By : digibake


I would skip all of the above answers and start using the react-dimensions Higher Order Component.

Just add a simple import and a function call, and you can access this.props.containerWidth and this.props.containerHeight in your component.

// Example using ES6 syntax
import React from 'react'
import Dimensions from 'react-dimensions'

class MyComponent extends React.Component {
  render() (
By : MindJuice

This video can help you solving your question :)
By: admin