react-dimensions

React higher-order component to get the dimensions of a wrapper element and pass them as properties to the child element.

v^1.0.0 is for React v0.14 and above. Use ^0.1.0 for React v0.13

Why? How?

Some React components require a width to be set in pixels, and cannot be set to 100%. This is a challenge for responsive design. This component measures the size of the parent node, and then passes these dimensions to your component.

Installation

Requires nodejs.

$ npm install react-dimensions

API

Dimensions([options])(MyComponent)

Wraps a react component and adds properties containerHeight and containerWidth. Useful for responsive design. Properties update on window resize. Note that the parent element must have either a height or a width, or nothing will be rendered

Can be used as a higher-order component or as an ES7 class decorator (see examples)

Parameters

• options object=
  • options.getHeight function= A function that is passed an element and returns element height, where element is the wrapper div. Defaults to (element) => element.clientHeight
  • options.getWidth function= A function that is passed an element and returns element width, where element is the wrapper div. Defaults to (element) => element.clientWidth
  • options.debounce [number] Optionally debounce the onResize callback function by supplying the delay time in milliseconds. This will prevent excessive dimension updates. See https://lodash.com/docs#debounce for more information. Defaults to 0, which disables debouncing.
  • options.debounceOpts [object] Options to pass to the debounce function. See https://lodash.com/docs#debounce for all available options. Defaults to {}.
  • options.containerStyle object= A style object for the <div> that will wrap your component. If you are using a flexbox layout you will need to style this div rather than your wrapped component (because flexbox only works with direct children). The default style is { margin: 0, padding: 0, border: 0 }.
  • options.className string= Control the class name set on the wrapper <div>
  • options.elementResize boolean= Set true to watch the wrapper div for changes in size which are not a result of window resizing - e.g. changes to the flexbox and other layout. (optional, default false)

Examples

// ES2015
import React from 'react'
import Dimensions from 'react-dimensions'

class MyComponent extends React.Component {
  render() (
    <div
      containerWidth={this.props.containerWidth}
      containerHeight={this.props.containerHeight}
    >
    </div>
  )
}

export default Dimensions()(MyComponent) // Enhanced component

// ES5
var React = require('react')
var Dimensions = require('react-dimensions')

var MyComponent = React.createClass({
  render: function() {(
    <div
      containerWidth={this.props.containerWidth}
      containerHeight={this.props.containerHeight}
    >
    </div>
  )}
}

module.exports = Dimensions()(MyComponent) // Enhanced component

Returns function A higher-order component that can be used to enhance a react component Dimensions()(MyComponent)

getWrappedInstance()

Returns the underlying wrapped component instance. Useful if you need to access a method or property of the component passed to react-dimensions. Does not currently work for stateless function components see #30

Returns object The wrapped React component instance

Live Example

Will open a browser window for localhost:9966

npm i && npm i react react-dom && npm start

Tests

$ npm test