GitHub

  • React higher-order component to get the dimensions of a wrapper element and pass them as properties to the child element.
  • options.containerStyle object = A style object for the
    that will wrap your component.
  • Component { render () ( < div containerWidth = { this .
  • Returns object The wrapped React component instance
  • Can be used as a higher-order component or as an ES7 class decorator (see examples)

react-dimensions – React higher-order component to get dimensions of container

@survivejs: digidem/react-dimensions – #reactjs hoc to get dimensions of container

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

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

. This is a challenge for responsive design. This component measures the size of the parent node, and then passes these dimensions to your component.

Requires nodejs.

To install the pre-release version:

. 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

function= A function that is passed an element and returns element height, where element is the wrapper div. Defaults to

function= A function that is passed an element and returns element width, where element is the wrapper div. Defaults to

onResize

object= A style object for the

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 }

string= Control the class name set on 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

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

Will open a browser window for localhost:9966

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

GitHub