react-sizer

Simple React HOC to get the size of a component

installation

``
npm install react-sizer
`

example

`
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import sizer from 'react-sizer';

class MyComponent extends Component {
static propTypes = {
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired
};

constructor(props) {
super(props);
}

render() {
const { width, height } = this.props;

return (


);
}
}

const MySizedComponent = sizer()(MyComponent);

`

options

The sizer HOC can be passed several options.

`
const options = {
getSize: domElement => ({width: domElement.clientWidth, height: domElement.clientHeight}),
widthProp: 'nameOfPropForInjectedWidth',
heightProp: 'nameOfPropForInjectedHeight',
getDisplayName: name => NameOfComponentToShowInReactDevTools(${name}),
updateSizeCallback: () => { / code to be run after the size has changed / },
resizeProps: [ 'one or more prop names', 'that will trigger recomputation of the size when their value changes']
};

class MyComponent extends Component {
static propTypes = {
nameOfPropForInjectedWidth: PropTypes.number.isRequired,
nameOfPropForInjectedHeight: PropTypes.number.isRequired
};

// ...
}

sizer(options)(MyComponent);
``