How to use react-sizeme - 10 common examples

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)

export { IconImageFullscreen } from "./Icon/IconImageFullscreen"
export { IconImageSet } from "./Icon/IconImageSet"
export { IconLayoutFullscreen } from "./Icon/IconLayoutFullscreen"
export { IconLayoutSplit } from "./Icon/IconLayoutSplit"
export { IconLayoutText } from "./Icon/IconLayoutText"
export { IconLayoutBasic } from "./Icon/IconLayoutBasic"
export { IconLink } from "./Icon/IconLink"
export { IconOrderedList } from "./Icon/IconOrderedList"
export { IconVideoPlay } from "./Icon/IconVideoPlay"
export { IconRemove } from "./Icon/IconRemove"
export { IconUnorderedList } from "./Icon/IconUnorderedList"
export { IconLock } from "./Icon/IconLock"

// FIXME: Refactor out SizeMe; see https://github.com/ctrlplusb/react-sizeme#server-side-rendering
import sizeMe from "react-sizeme"
sizeMe.noPlaceholders = true

// Constants
import * as AllConstants from "./Constants"
export const Constants = AllConstants

import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import sizeMe from "react-sizeme";
// import fetch from "jest-fetch-mock";
import "core-js/stable";
import "regenerator-runtime/runtime";

Enzyme.configure({ adapter: new Adapter() });

sizeMe.noPlaceholders = true;
// global.fetch = fetch;
localStorage.clear();

// Needed so that any component that uses sizeme can be jest tested
import sizeMe from 'react-sizeme';

sizeMe.noPlaceholders = true;

// Styles
export styles from './styles.scss';

// Components
export Button from './components/Button';
export Table from './components/Table';
export AddCard from './components/AddCard';
export ComposedModal from './components/ComposedModal';
export WizardModal from './components/WizardModal';
export WizardInline from './components/WizardInline/WizardInline';
export StatefulWizardInline from './components/WizardInline/StatefulWizardInline';
export TableHead from './components/Table/TableHead/TableHead';
export TableBody from './components/Table/TableBody/TableBody';
export TableToolbar from './components/Table/TableToolbar/TableToolbar';
export EmptyTable from './components/Table/EmptyTable/EmptyTable';

// Needed to mock resize observer
class ResizeObserver {
  observe() {
    // do nothing
  }
  unobserve() {
    // do nothing
  }
}

window.ResizeObserver = ResizeObserver;

// Needed so that any component that uses sizeme can be jest tested
import sizeMe from 'react-sizeme';

sizeMe.noPlaceholders = true;

// Force the timezone to be the same everywhere
const moment = require.requireActual('moment-timezone');
moment.fn.local = moment.fn.utc; // mock the local function to return utc
jest.doMock('moment', () => {
  moment.tz.setDefault('America/Chicago');
  return moment;
});
Date.prototype.getTimezoneOffset = () => 300; // mock date offset
Date.now = jest.fn(() => 1537538254000); // mock internal date
Date.prototype.getLocaleString = () => 'Mock Date!';

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);
    }