How to use the react-sizeme function in react-sizeme

let codes = item['purposeCodes'].split(';');
    codes.map((code) => {
      c = code.trim()
      if(c in obj){
        obj[c] += item.amount / codes.length; // NOTE - splitting based on length of codes in trans
      } else {
        obj[c] = 0;
      }
    })
  }
  })
  return obj
}


const SizeMeHOC = SizeMe({
  monitorWidth: true,
  monitorHeight: true,
  refreshRate: 16
});
const colors = [
    '#8dd3c7',
    '#ffffb3',
    '#bebada',
    '#fb8072',
    '#80b1d3',
    '#fdb462',
    '#b3de69',
    '#fccde5',
    '#2196F3',
    '#bc80bd',
    '#ccebc5',

import d3 from 'd3';
// import topojson from 'topojson';
import Datamap from 'datamaps/dist/datamaps.usa.min'
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import statesDefaults from '../../data/states-defaults';
import assign from 'lodash/assign';
import numeral from 'numeral';
// import colorbrewer from 'colorbrewer';
import SizeMe from 'react-sizeme';
const SizeMeHOC = SizeMe({monitorWidth: true, monitorHeight: true, refreshRate: 24});
const styles = {
    position: 'relative'
}
// const colorBlend = d3.interpolateRgb('#A3D3D2', '#10716F'); NOTE - alternate color pallete
class DataMap extends Component {
    constructor(props) {
        super(props);
        this.state = {
            palletteRange: [],
            domainRange: []
        }
        this.datamap = null;
        this.currentScreenWidth = this.currentScreenWidth.bind(this);
        this.reducedData = this.reducedData.bind(this);
    }
    linearPalleteScale(value) {

import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import DataMap from '../../components/Visuals/DataMap.jsx';
import statesData from '../../data/statesData';
import StoryCard from '../../components/StoryCards/StoryCard.jsx';
import Legend from '../../components/Legend/Legend.jsx';
import {loadStateInfo} from '../../actions'
import SizeMe from 'react-sizeme';
import numeral from 'numeral';
// function loadData(props) {
//   const {filer_id} = props.params;
//   props.loadStateInfo(filer_id);
// }
const SizeMeHOC = SizeMe({monitorWidth: true, monitorHeight: true, refreshRate: 16});

// const colors = [
//     '#EEFBFB',
//     '#CDF3F2',
//     '#89C2C0',
//     '#84BEBB',
//     '#71B0AE',
//     '#6CACAA',
//     '#5A9E9B',
//     '#1F8481',
//     '#165F5C'
// ]; // old colors
const colors = ['#f7fbff','#deebf7','#c6dbef','#9ecae1','#6baed6','#4292c6','#2171b5','#08519c','#08306b']
const domainRange = [
    100,
    1000,

top: 10px;
  left: ${({ anchorPosition, size }) =>
    anchorPosition && anchorPosition.width / 2 - size.width / 2}px;
  padding: 13px 15px;
  background: #000;
  color: #fff;
  text-align: center;
  ${props => secondaryFont.style};
  // font-size: 15px;
  cursor: default;
  ${({ minWidth }) => minWidth && `min-width: ${minWidth};`}
  & span {
    cursor: pointer;
  }
`
const Message = sizeMe(sizeMeOptions)(SizelessMessage)

import { withTheme } from '@ncigdc/theme';

type TProps = {
  mostAffectedCasesChart: Array,
  mostAffectedCasesTable: Array,
  theme: Object,
  size: {
    width: number,
  },
  push: Function,
};

const enhance = compose(
  withTheme,
  withSize(),
  withRouter
);

const MostAffectedCases = ({
  mostAffectedCasesChart,
  mostAffectedCasesTable,
  theme,
  size: {
    width,
  },
  push,
}: TProps) => {
  const chartMargin = { top: 30, right: 50, bottom: 105, left: 40 };
  const bandWidth = ((width - chartMargin.right - chartMargin.left) / (mostAffectedCasesChart.length + 1) / 2) * 0.7;

  return (

import React, {Component} from 'react';
import BarChart from '../../components/BarChart/BarChart.jsx';
import SizeMe from 'react-sizeme';
const SizeMeHOC = SizeMe({
  monitorWidth: true,
  monitorHeight: true,
  refreshRate: 16
});
class WhoChart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            series: ['Finances'],
            labels: [
                'PAC', 'Business', 'Large Donors', 'Grassroots', 'Party'
            ],
            colors: ['#bebada', '#fb8072', '#8dd3c7', '#b3de69','#80b1d3']
        }
        //this.handleResize = this.handleResize.bind(this);
    }

return renderedImages
}

const ImageCollectionContainer = styled.div`
  display: flex;
  width: 100%;
  ${pMedia.xs`
    flex-direction: column;
  `}
`

const sizeMeOptions = {
  refreshRate: 64,
}

export default sizeMe(sizeMeOptions)(ImageCollection)

icon={<code style="{grey}">}
                    /&gt;
                    }
                    /&gt;
                    
                    
                
            
        )
    }
}

export default compose(sizeMe())(UserComponent)
</code>

${pMedia.xs`
    margin-bottom: 10px;
    width: 100%;

    img {
      width: 100%;
    }
  `};
`

const sizeMeOptions = {
  refreshRate: SIZE_ME_REFRESH_RATE,
  noPlaceholder: true,
}

export const ImageCollection = sizeMe(sizeMeOptions)(ImageCollectionComponent)

}

const ImageCollectionContainer = styled.div`
  display: flex;
  width: 100%;
  ${pMedia.xs`
    flex-direction: column;
  `}
`

const sizeMeOptions = {
  refreshRate: sizeMeRefreshRate,
  noPlaceholder: true,
}

export default sizeMe(sizeMeOptions)(ImageCollection)