{"id":17228989,"url":"https://github.com/fezvrasta/react-resize-aware","last_synced_at":"2025-05-15T13:04:34.825Z","repository":{"id":47360352,"uuid":"58060480","full_name":"FezVrasta/react-resize-aware","owner":"FezVrasta","description":"⇲👁 A simple React Hook which allows to listen the resize event of any target element when it changes sizes","archived":false,"fork":false,"pushed_at":"2024-03-22T12:03:22.000Z","size":298,"stargazers_count":570,"open_issues_count":0,"forks_count":36,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-07T14:11:08.081Z","etag":null,"topics":["listen","react","resize-events","sizes"],"latest_commit_sha":null,"homepage":"https://fezvrasta.github.io/react-resize-aware","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FezVrasta.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-05-04T14:53:10.000Z","updated_at":"2025-01-02T02:04:48.000Z","dependencies_parsed_at":"2024-03-22T13:29:38.891Z","dependency_job_id":"b34cebff-05e4-4d59-877e-baac427baa59","html_url":"https://github.com/FezVrasta/react-resize-aware","commit_stats":{"total_commits":102,"total_committers":18,"mean_commits":5.666666666666667,"dds":0.3921568627450981,"last_synced_commit":"419336b0ce23edd67dabfb1a20d241d659e196ac"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FezVrasta%2Freact-resize-aware","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FezVrasta%2Freact-resize-aware/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FezVrasta%2Freact-resize-aware/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FezVrasta%2Freact-resize-aware/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FezVrasta","download_url":"https://codeload.github.com/FezVrasta/react-resize-aware/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248961186,"owners_count":21189991,"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":["listen","react","resize-events","sizes"],"created_at":"2024-10-15T04:45:39.932Z","updated_at":"2025-04-14T20:57:10.134Z","avatar_url":"https://github.com/FezVrasta.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-resize-aware\n\nIt does one thing, it does it well: listens to resize events on any HTML element.\n\n`react-resize-aware` is a zero dependency, **~600 bytes** [React Hook](https://reactjs.org/docs/hooks-reference.html) you can use to detect resize events without relying on intervals, loops, DOM manipulation detection or CSS redraws.\n\n**It takes advantage of the `resize` event on the `HTMLObjectElement`, works on any browser I know of, and it's super lightweight.**\n\nIn addition, it doesn't directly alters the DOM, everything is handled by React.\n\n\u003e Looking for the 2.0 docs? [Click here](https://github.com/FezVrasta/react-resize-aware/tree/v2.7.2)\n\n## Installation\n\n```\nyarn add react-resize-aware\n```\n\nor with npm:\n\n```\nnpm install --save react-resize-aware\n```\n\n## Usage\n\nThe API is simple yet powerful, the `useResizeAware` [Hook](https://reactjs.org/docs/hooks-reference.html)\nreturns a React node you will place inside the measured element, and an object containing its sizes:\n\n```jsx\nimport React from \"react\";\nimport useResizeAware from \"react-resize-aware\";\n\nconst App = () =\u003e {\n  const [resizeListener, sizes] = useResizeAware();\n\n  return (\n    \u003cdiv style={{ position: \"relative\" }}\u003e\n      {resizeListener}\n      Your content here. (div sizes are {sizes?.width} x {sizes?.height})\n    \u003c/div\u003e\n  );\n};\n```\n\n\u003e **Heads up!**: Make sure to assign a `position != initial` to the HTMLElement you want to target (`relative`, `absolute`, or `fixed` will work).\n\n## API\n\nThe Hook returns an array with two elements inside:\n\n### `[resizeListener, ...]` (first element)\n\nThis is an invisible React node that must be placed as direct-child of the HTMLElement you want to listen the resize events of.\n\nThe node is not going to interfer with your layouts, I promise.\n\n### `[..., sizes]` (second element)\n\nThis object contains the `width` and `height` properties, it could be `null` if the element is not yet rendered.\n\n## Custom `reporter`\n\nYou can customize the properties of the `sizes` object by passing a custom `reporter` function as first argument of `useResizeAware`.\n\n```tsx\nconst customReporter = (target: ?HTMLIFrameElement) =\u003e ({\n  clientWidth: target != null ? target.clientWidth : 0,\n});\n\nconst [resizeListener, sizes] = useResizeAware(customReporter);\n\nreturn (\n  \u003cdiv style={{ position: \"relative\" }}\u003e\n    {resizeListener}\n    Your content here. (div clientWidth is {sizes.clientWidth})\n  \u003c/div\u003e\n);\n```\n\nThe above example will report the `clientWidth` rather than the default `offsetWidth` and `offsetHeight`.\n\n## React to size variations\n\nFor completeness, below you can find an example to show how to make your code react to size variations using React Hooks:\n\n```jsx\nconst App = () =\u003e {\n  const [resizeListener, sizes] = useResizeAware();\n\n  React.useEffect(() =\u003e {\n    console.log(\"Do something with the new size values\");\n  }, [sizes.width, sizes.height]);\n\n  return (\n    \u003cdiv style={{ position: \"relative\" }}\u003e\n      {resizeListener}\n      Your content here.\n    \u003c/div\u003e\n  );\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffezvrasta%2Freact-resize-aware","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffezvrasta%2Freact-resize-aware","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffezvrasta%2Freact-resize-aware/lists"}