{"id":18510772,"url":"https://github.com/envato/react-resize-observer-hook","last_synced_at":"2025-04-09T04:33:23.280Z","repository":{"id":43043882,"uuid":"223336714","full_name":"envato/react-resize-observer-hook","owner":"envato","description":"Observe multiple DOM elements with a single ResizeObserver.","archived":false,"fork":false,"pushed_at":"2022-07-12T05:24:20.000Z","size":285,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":32,"default_branch":"main","last_synced_at":"2025-04-06T17:54:15.214Z","etag":null,"topics":["hook","hooks","react","react-hooks","resizeobserver"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/envato.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE-OF-CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null}},"created_at":"2019-11-22T06:16:32.000Z","updated_at":"2022-07-12T05:40:46.000Z","dependencies_parsed_at":"2022-09-01T13:41:16.703Z","dependency_job_id":null,"html_url":"https://github.com/envato/react-resize-observer-hook","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/envato%2Freact-resize-observer-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/envato%2Freact-resize-observer-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/envato%2Freact-resize-observer-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/envato%2Freact-resize-observer-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/envato","download_url":"https://codeload.github.com/envato/react-resize-observer-hook/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247980833,"owners_count":21027803,"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":["hook","hooks","react","react-hooks","resizeobserver"],"created_at":"2024-11-06T15:25:01.877Z","updated_at":"2025-04-09T04:33:22.844Z","avatar_url":"https://github.com/envato.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"200\" src=\"./React-Breakpoints.png\" alt=\"React Breakpoints logo\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eReact ResizeObserver Hook\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/@envato/react-resize-observer-hook?style=for-the-badge\" /\u003e\n  \u003cimg alt=\"react version\" src=\"https://img.shields.io/npm/dependency-version/@envato/react-resize-observer-hook/peer/react?style=for-the-badge\"\u003e\n  \u003cimg alt=\"license\" src=\"https://img.shields.io/npm/l/@envato/react-resize-observer-hook?style=for-the-badge\" /\u003e\n  \u003ca href=\"CODE-OF-CONDUCT.md\"\u003e\u003cimg alt=\"contributor covenant v2.0 adopted\" src=\"https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg?style=for-the-badge\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n\u003e Observe multiple DOM elements with a single ResizeObserver.\n\nThis package provides you with:\n\n- a context `\u003cProvider\u003e` with a `ResizeObserver` instance;\n- a `useResizeObserver()` hook to observe any element's size changes.\n\nThis allows you to know the size of each observed element.\n\n# 📚 Docs\n\nThis package was developed **and documented** as part of the [`@envato/react-breakpoints`](https://github.com/envato/react-breakpoints) package. It's separated into its own package because I believe it can be used separately if you don't need all the abstractions that React Breakpoints gives you. Please refer to the [React Breakpoints API Docs](https://github.com/envato/react-breakpoints/blob/main/docs/api.md) for more details about `\u003cProvider\u003e` and `useResizeObserver()`.\n\n# ⚡️ Quick start\n\n```shell\nnpm install @envato/react-resize-observer-hook\n```\n\n## Set up the provider\n\n```jsx\nimport { Provider as ResizeObserverProvider } from '@envato/react-resize-observer-hook';\n\nconst App = () =\u003e \u003cResizeObserverProvider\u003e...\u003c/ResizeObserverProvider\u003e;\n```\n\n⚠️ **Caution** — You may need to pass some props to `\u003cProvider\u003e` to increase **browser support**. Please refer to the [React Breakpoints API Docs](https://github.com/envato/react-breakpoints/blob/main/docs/api.md#provider).\n\n## Observe an element\n\n```jsx\nimport { useResizeObserver } from '@envato/react-resize-observer-hook';\n\nconst ObservedDiv = () =\u003e {\n  const [ref, observedEntry] = useResizeObserver();\n  const { width, height } = observedEntry.contentRect;\n\n  return (\n    \u003cdiv ref={ref}\u003e\n      This element is {width}px wide and {height}px high.\n    \u003c/div\u003e\n  );\n};\n```\n\nDepending on your implementation of `ResizeObserver`, the internal `ResizeObserverEntry` can contain size information about multiple \"boxes\" of the observed element. Observing these boxes instead of `contentRect` (default) can be done by passing an options object to the hook:\n\n```javascript\nconst options = {\n  box: 'border-box'\n};\n\nconst [ref, observedEntry] = useResizeObserver(options);\n\nconst width = observedEntry.borderBox[0].inlineSize;\nconst height = observedEntry.borderBox[0].blockSize;\n```\n\nSee [MDN reference guide](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) for further information.\n\n# Maintainers\n\n- [Marc Dingena](https://github.com/mdingena) (owner)\n\n# Contributing\n\nFor bug fixes, documentation changes, and small features:\n\n1. Fork this repository.\n1. Create your feature branch (git checkout -b my-new-feature).\n1. Commit your changes (git commit -am 'Add some feature').\n1. Push to the branch (git push origin my-new-feature).\n1. Create a new Pull Request.\n\n**For larger new features**: Do everything as above, but first also make contact with the project maintainers to be sure your change fits with the project direction and you won't be wasting effort going in the wrong direction.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenvato%2Freact-resize-observer-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenvato%2Freact-resize-observer-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenvato%2Freact-resize-observer-hook/lists"}