Sizeable

React component that passes the computed size of its parent (i.e. width only, by default) down to its children. Assumes block-rendered contents, and that sizing depends on window size only.

npm install --save react-sizeable (or yarn add react-sizeable)

import Sizeable from 'react-sizeable'

<Sizeable>
  <MyComponent />
</Sizeable>

<MyComponent> element will receive width as a prop (unless disabled), as well as height (if enabled) and size: [width, height] (if both enabled).

Alternative usage:

<Sizeable>{({ width }) =>
  <div style={{ width }}></div>
}</Sizeable>

<Sizeable height={true}>{({ width, height }) =>
  <div style={{ width, height }}></div>
}</Sizeable>

<Sizeable height={true}>{({ width, height }) =>
  <div style={{ width, height }}></div>
}</Sizeable>

<Sizeable height={true}>{({ size }) =>
  <div style={{ width: size[0], height: size[1] }}></div>
}</Sizeable>

The width and height props can also be numbers or functions of the DOM node, which defaults (if enabled) to the offsetWidth and offsetHeight properties.

A component prop can also be specified (e.g. "div" or any React component), in which case the children will be wrapped, which allows for multiple children (or alternatively, a function returning an array). Arbitrary extra props will also be passed through to this wrapping element.

For added flexibility, the component can be extended with a condition for whether or not to resize. For instance, to only update the size if the height changes:

class HeightTriggeredSizeable extends Sizeable {
  shouldResize(previous, current) {
    return current.height !== previous.height
  }
}