React Element Size Reporter

Higher order React components to report size of contained DOM elements.

Uses element-size-reporter to report width, height, and top of contained DOM elements. Size Reports are logically group-able so that different components' DOM elements sizes can be accumulated together in a flux flow.

Demo and Example

If you are interested in seeing demo code usage and/or a staged demo, please review this brief thread covering this topic.

API

windowResizeReporter(Component, selector, options)

fluxibleWindowResizeReporter(Component, selector, sizeAction, options)

windowResizeReporter

Creates a higher order component that reports on window 'resize' event. Reports on the element found by the supplied selector. When the window 'resize' event occurs, a Size Report is delivered to an action creator supplied by one of three methods. The first viable action creator found is used, here is the search order:

1. Action creator supplied in options, name actionCreator.

2. Action creator supplied in props, name actionCreator.

3. Action creator found on the higher order component instance (can supplied by a derived class, method named actionCreator).

Parameters

Component {ReactComponent} - The React Component to render.

selector {String} - Selects the DOM element to report the size about.

options {Object} - The window resize and reporting options.

• actionCreator {Function} - Creates an action on window resize. Receives a Size Report.

• resizeWait {Number} - Resize debouncer trailing wait in milliseconds. Defaults to 100ms.

• sizeReporter {Object} - element-size-reporter options

fluxibleWindowResizeReporter

Same as windowResizeReporter, but for use with Fluxible. Creates a higher order component that reports on window 'resize' event. Reports on the element found by the supplied selector. When the window 'resize' event occurs, a Size Report is delivered to the supplied sizeAction creator.

Parameters

Component {ReactComponent} - The React Component to render.

selector {String} - Selects the DOM element to report the size about.

sizeAction {Function} - The action creator that receives the Size Report.

options {Object} - The window resize and reporting options. Same as windowResizeReporter, except the actionCreator option is ignored - it is supplied explicitly via sizeAction.

• resizeWait {Number} - Resize debouncer trailing wait in milliseconds. Defaults to 100ms.

• sizeReporter {Object} - element-size-reporter options