Package Exports

react-dimensions

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-dimensions) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-dimensions

React higher-order component to get dimensions of container

`Dimensions([options], [options.getHeight], [options.getWidth])`

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() (
    <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, 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