ResponsiveWrapper.js

import React, { Component } from 'react';
import { heights, widths } from './../styles/theme.json';

export default class ResponsiveWrapper extends Component {
  constructor(props) {
    super(props);
    this.state = {
      height: {},
      homeHeightRatio: this.props.ratio,
      wrapperWidth: this.props.wrapperWidth
    };
  }
  updateDimensions() {
    const ww = window.innerWidth;
    if (ww < this.state.wrapperWidth) {
      const imgHeight = (ww * this.state.homeHeightRatio) * .1;
      this.setState({
        height: imgHeight
      });
    } else {
      const imgHeight = (this.state.wrapperWidth * this.state.homeHeightRatio) * .1;
      this.setState({
        height: imgHeight
      });
    }
  }
  componentDidMount() {
    this.updateDimensions();
    window.addEventListener('resize', this.updateDimensions.bind(this));
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions.bind(this));
  }
  render() {
    return (
      <li ref="item" style={{ height: this.state.height + 'rem' }} className={'grid-item-wrapper ' + (this.props.width)}>
        {this.props.children}
        <style jsx>{`
          .grid-item-wrapper {
            display: flex;
            position: relative;
          }
          .c-portrait,
          .c-instagram,
          .c-border {
            width: calc(100% / 3);
          }
          .c-landscape {
            width: calc((100% / 3) * 2);
          }
      `}</style>
      </li>
    );
  };
};