How to use react-resize-detector - 6 common examples

// displayName: `schemaProvider(${Component.displayName})`
    render() {
      const { introspectionQuery, schema, ...props } = this
        .props as SchemaProviderProps;
      let dataStructure: any = null;
      if (schema) {
        dataStructure = new SchemaBirdseye(schema);
      } else if (introspectionQuery) {
        dataStructure = new IntrospectionBirdseye(introspectionQuery.__schema);
      }
      return ;
    }
  };
};

export default schemaProvider(withResizeDetector(GraphqlBirdseye));

);
    }

}

function mapStoreToProps(store: ReduxStoreType): DeviceLayoutComponentStoreProps {
    return {
        connectedUsers: getConnectedUsersFromStore(store),
        loggedInUser: getLoggedInUserFromStore(store),
        myPeerId: getMyPeerIdFromStore(store),
        deviceLayout: getDeviceLayoutFromStore(store)
    }
}

export default connect(mapStoreToProps)(withResizeDetector(DeviceLayoutComponent));

function ZooHeaderContainer (props) {
  const { breakpoint, className, height, width, ...rest } = props
  const isNarrow = width <= breakpoint
  return 
}

ZooHeaderContainer.defaultProps = {
  breakpoint: 960
}

ZooHeaderContainer.propTypes = {
  breakpoint: PropTypes.number
}

export default withResizeDetector(ZooHeaderContainer)
export { ZooHeaderContainer }

return (
      <>
        <nav role="{role}">
          <div style="{sizeBar}"></div>
          <ul role="tablist">
            {tabsWithProps}
          </ul>
        </nav>
        {tabContentWithProps}
      
    );
  }
}

export default withResizeDetector(Tabs);

}
    }

    render() {
        const top = (this.props.top + this.state.insideHeight >= this.props.height) ? this.props.height - this.state.insideHeight - 1 : this.props.top;
        const left = (this.props.left + this.state.insideWidth >= this.props.width) ? this.props.width - this.state.insideWidth - 1 : this.props.left;
        return (
            <div style="{{top,">
                 {this.setState({insideWidth, insideHeight})}}/&gt;
                {this.props.children}
            </div>
        );
    }
}

export default withResizeDetector(StayInsideContainer);

* Copyright 2017, GeoSolutions Sas.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree.
 */
const React = require('react');
const PropTypes = require('prop-types');
const Message = require('../I18N/Message');
const {Glyphicon, Panel} = require('react-bootstrap');
const Dock = require('react-dock').default;
const BorderLayout = require('../layout/BorderLayout');
const {NO_DETAILS_AVAILABLE} = require('../../actions/maps');
const LocaleUtils = require('../../utils/LocaleUtils');
const Spinner = require('react-spinkit');
const ResizeDetector = require('react-resize-detector').default;

class DetailsPanel extends React.Component {
    static propTypes = {
        id: PropTypes.string,
        active: PropTypes.bool,
        closeGlyph: PropTypes.string,
        panelStyle: PropTypes.object,
        panelClassName: PropTypes.string,
        style: PropTypes.object,
        onClose: PropTypes.func,
        dockProps: PropTypes.object,
        width: PropTypes.number,
        detailsText: PropTypes.string,
        dockStyle: PropTypes.object
    }