Home

Awesome

react-dimensions

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

DEVELOPMENT STATUS: I'm not really using this any more since for grids/tables in React I've switched from fixed-data-table (which I was using this for) to react-virtualized which includes similar functionality to this with the Autosizer. I'm happy for someone else to take this module on.

v2.0.0-alpha1: Includes several breaking changes, most importantly changing the way dimensions are calculated. The parent container is now used for width calculations, and the wrapper div inside this component is ignored. Hopefully this will solve the multiple styling issues users have had, but it will break layout in apps using v1.2.0

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

To install the pre-release version:

$ npm install react-dimensions@next

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

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