react-element-size-reporter

Higher order React components to report contained DOM element sizes

React Element Size Reporter

npm version Build Status Coverage Status Dependency Status devDependency Status

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.

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.

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.

Related Repositories

react-element-size-reporter

react-element-size-reporter

Higher order React components to report contained DOM element sizes ...