How to use react-resize-aware - 3 common examples

const React = require('react')
const PropTypes = require('prop-types')
const Draggable = require('react-draggable')
const resizeAware = require('react-resize-aware')
const defaultLineup = require('./defaultLineup')
const pieceComponents = require('./pieces')
const decode = require('./decode')

const ResizeAware = resizeAware.default || resizeAware
const getDefaultLineup = () => defaultLineup.slice()
const noop = () => {
  /* intentional noop */
}

const square = 100 / 8
const squareSize = `${square}%`

const squareStyles = {
  width: squareSize,
  paddingBottom: squareSize,
  float: 'left',
  position: 'relative',
  pointerEvents: 'none'
}

if (typeof arg === 'object') {
            Object.keys(arg).forEach(key => {
              parsedSelectors[key] = arg[key];
            });
          } else {
            parsedSelectors[arg] = true;
          }
        });

        return matches(queries, parsedSelectors, width, height);
      },
      ...props,
    });
  }

  return makeResizeAware(Enhanced);
}

queries: this.props.queries,
      width: this.props.width,
      height: this.props.height,
    };
  }

  render() {
    const {component, queries, getRef, children, proxy, ...props} = this.props;
    const ref = proxy ? {getRef} : {ref: getRef};
    return createElement(component, {...ref, ...props}, children);
  }

  static childContextTypes = contextTypes;
}

const ResizeAwareElementQuery = makeResizeAware(ElementQuery);

function matches(queries, selectors, width, height) {
  const results = Object.keys(queries).map(key => {
    const query = {...queries[key]};
    if (query.maxWidth) {
      query.maxWidth = query.maxWidth >= width;
    }
    if (query.minWidth) {
      query.minWidth = query.minWidth <= width;
    }
    if (query.maxHeight) {
      query.maxHeight = query.maxHeight >= height;
    }
    if (query.minHeight) {
      query.minHeight = query.minHeight <= height;
    }