react-dimensions

React higher-order component to get dimensions of container

`Dimensions([options])`

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)

v1.0.0 is for React v0.14 only. Use ^0.1.0 for React v0.13

Parameters

parameter	type	description
`[options]`	object	optional: Options
`[options.getHeight]`	function	optional: `getHeight(element)` should return element height, where element is the wrapper div. Defaults to `element.clientHeight`
`[options.getWidth]`	function	optional: `getWidth(element)` should return element width, where element is the wrapper div. Defaults to `element.clientWidth`

Example

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

class MyComponent extends React.Component {
  render() {
    return (
      <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() {
    return (
      <div 
        containerWidth={ this.props.containerWidth } 
        containerHeight={ this.props.containerHeight }>
      </div>
      );
  }
})

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

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

Live Example

Will open a browser window for localhost:9966

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

Installation

Requires nodejs.

$ npm install react-dimensions

Tests

$ npm test

======================

See it on GitHub

Return to Code