React [higher-order component](https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775) to get dimensions of container
npm install react-dimensionsReact 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
Some React components require a width to be set in pixels, and cannot be set to Requires nodejs. `` Wraps a react component and adds properties containerHeight Can be used as a Parameters - options Examples class MyComponent extends React.Component { export default Dimensions()(MyComponent) // Enhanced component ` var MyComponent = React.createClass({ module.exports = Dimensions()(MyComponent) // Enhanced component Returns function A higher-order component that can be Returns the underlying wrapped component instance. Returns object The wrapped React component instance Will open a browser window for localhost:9966 npm i && npm i react react-dom && npm start `100%. This is a challenge for responsive design. This component creates a wrapper and sets the width and height to 100%, and then passes the dimensions of this div to your component.Installation
sh`
$ npm install react-dimensionsAPI
$3
andcontainerWidth. 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
higher-order component
or as an ES7 class decorator
(see examples) object=options.getHeight
- function= A function that is passed an element and returns element(element) => element.clientHeight
height, where element is the wrapper div. Defaults to
- function= A function that is passed an element and returns element(element) => element.clientWidth
width, where element is the wrapper div. Defaults to
- object= A style object for the that will wrap your component.div
The dimensions of this are what are passed as props to your component. The default style is{ width: '100%', height: '100%', padding: 0, border: 0 }
which will cause the div to fill itsoptions.className
parent in most cases. If you are using a flexbox layout you will want to change this default style.
- string= Control the class name set on the wrapper
- boolean= Set true to watch the wrapper div for changes infalse
size which are not a result of window resizing - e.g. changes to the flexbox and other layout. (optional, default )`javascript
// ES2015
import React from 'react'
import Dimensions from 'react-dimensions'
render() (
containerHeight={this.props.containerHeight}
>
)
}
`javascript
// ES5
var React = require('react')
var Dimensions = require('react-dimensions')
render: function() {(
containerHeight={this.props.containerHeight}
>
)}
}
`
used to enhance a react component Dimensions()(MyComponent)$3
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 #30Live Example
Tests
sh``
$ npm test