{"id":17068922,"url":"https://github.com/localnerve/react-element-size-reporter","last_synced_at":"2026-04-20T05:35:51.986Z","repository":{"id":8317359,"uuid":"57469659","full_name":"localnerve/react-element-size-reporter","owner":"localnerve","description":"Higher order React component to report contained DOM element sizes","archived":false,"fork":false,"pushed_at":"2023-10-18T08:10:26.000Z","size":1205,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-01T00:19:30.594Z","etag":null,"topics":["dom-element","flux","fluxible","react-component","redux","size-calculation"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/localnerve.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-01T01:54:57.000Z","updated_at":"2023-07-18T09:07:24.000Z","dependencies_parsed_at":"2023-01-14T11:45:42.356Z","dependency_job_id":null,"html_url":"https://github.com/localnerve/react-element-size-reporter","commit_stats":null,"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/localnerve%2Freact-element-size-reporter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/localnerve%2Freact-element-size-reporter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/localnerve%2Freact-element-size-reporter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/localnerve%2Freact-element-size-reporter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/localnerve","download_url":"https://codeload.github.com/localnerve/react-element-size-reporter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245090894,"owners_count":20559296,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom-element","flux","fluxible","react-component","redux","size-calculation"],"created_at":"2024-10-14T11:15:34.844Z","updated_at":"2026-04-20T05:35:51.950Z","avatar_url":"https://github.com/localnerve.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Element Size Reporter\n\n[![npm version](https://badge.fury.io/js/react-element-size-reporter.svg)](http://badge.fury.io/js/react-element-size-reporter)\n![Verify](https://github.com/localnerve/react-element-size-reporter/workflows/Verify/badge.svg)\n[![Coverage Status](https://coveralls.io/repos/github/localnerve/react-element-size-reporter/badge.svg?branch=master)](https://coveralls.io/github/localnerve/react-element-size-reporter?branch=master)\n\n\u003e Higher order React components to report size of contained DOM elements.\n\nUses [element-size-reporter](https://github.com/localnerve/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.\n\n## Demo and Example\nIf you are interested in seeing demo code usage and/or a staged demo, please review [this brief thread](https://github.com/localnerve/react-element-size-reporter/issues/40) covering this topic.  \n\n## API\n```javascript\nwindowResizeReporter(Component, selector, options)\n\nfluxibleWindowResizeReporter(Component, selector, sizeAction, options)\n```\n\n### windowResizeReporter\nCreates 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](https://github.com/localnerve/element-size-reporter#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:\n\n1. Action creator supplied in options, name `actionCreator`.\n\n2. Action creator supplied in props, name `actionCreator`.\n\n3. Action creator found on the higher order component instance (can supplied by a derived class, method named `actionCreator`).\n\n#### Parameters\n`Component` {ReactComponent} - The React Component to render.\n\n`selector` {String} - Selects the DOM element to report the size about.\n\n`options` {Object} - The window resize and reporting options.\n  * `actionCreator` {Function} - Creates an action on window resize. Receives a [Size Report](https://github.com/localnerve/element-size-reporter#size-report).\n\n  * `resizeWait` {Number} - Resize debouncer trailing wait in milliseconds. Defaults to 100ms.\n\n  * `sizeReporter` {Object} - [element-size-reporter options](https://github.com/localnerve/element-size-reporter#options)\n\n### fluxibleWindowResizeReporter\nSame as [windowResizeReporter](#windowResizeReporter), but for use with [Fluxible](http://fluxible.io). 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](https://github.com/localnerve/element-size-reporter#size-report) is delivered to the supplied `sizeAction` creator.\n\n#### Parameters\n`Component` {ReactComponent} - The React Component to render.\n\n`selector` {String} - Selects the DOM element to report the size about.\n\n`sizeAction` {Function} - The action creator that receives the [Size Report](https://github.com/localnerve/element-size-reporter#size-report).\n\n`options` {Object} - The window resize and reporting options. Same as [windowResizeReporter](#windowResizeReporter), except the actionCreator option is ignored - it is supplied explicitly via `sizeAction`.\n\n* `resizeWait` {Number} - Resize debouncer trailing wait in milliseconds. Defaults to 100ms.\n\n* `sizeReporter` {Object} - [element-size-reporter options](https://github.com/localnerve/element-size-reporter#options)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flocalnerve%2Freact-element-size-reporter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flocalnerve%2Freact-element-size-reporter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flocalnerve%2Freact-element-size-reporter/lists"}