{"id":13773252,"url":"https://github.com/pmndrs/react-use-measure","last_synced_at":"2025-04-27T03:57:19.186Z","repository":{"id":37721620,"uuid":"218783108","full_name":"pmndrs/react-use-measure","owner":"pmndrs","description":"🙌 Utility to measure view bounds","archived":false,"fork":false,"pushed_at":"2025-01-30T16:24:09.000Z","size":575,"stargazers_count":903,"open_issues_count":20,"forks_count":31,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-24T08:58:53.349Z","etag":null,"topics":["bounds","hooks","measure","react","use"],"latest_commit_sha":null,"homepage":"https://npmjs.com/react-use-measure","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/pmndrs.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-31T14:19:05.000Z","updated_at":"2025-04-23T07:16:08.000Z","dependencies_parsed_at":"2023-02-06T11:46:00.692Z","dependency_job_id":null,"html_url":"https://github.com/pmndrs/react-use-measure","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Freact-use-measure","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Freact-use-measure/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Freact-use-measure/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Freact-use-measure/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pmndrs","download_url":"https://codeload.github.com/pmndrs/react-use-measure/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250597738,"owners_count":21456426,"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":["bounds","hooks","measure","react","use"],"created_at":"2024-08-03T17:01:13.481Z","updated_at":"2025-04-24T08:58:58.714Z","avatar_url":"https://github.com/pmndrs.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","React Hooks","React tools"],"sub_categories":["React Components"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg height=\"400\" src=\"https://i.imgur.com/eMYYMla.jpg\" /\u003e\n\u003c/p\u003e\n\n    yarn add react-use-measure\n\nThis small tool will measure the boundaries (for instance width, height, top, left) of a view you reference. It is reactive and responds to changes in size, window-scroll and nested-area-scroll.\n\n### Why do we need this hook?\n\nBecause there is [no simple way](https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element) to just get relative view coordinates. Yes, there is getBoundingClientRect, but it does not work when your content sits inside scroll areas whose offsets are simply neglected (as well as page scroll). Worse, mouse coordinates are relative to the viewport (the visible rect that contains the page). There is no easy way, for instance, to know that the mouse hovers over the upper/left corner of an element. This hook solves it for you.\n\nYou can try a live demo here: https://codesandbox.io/s/musing-kare-4fblz\n\n# Usage\n\n```jsx\nimport useMeasure from 'react-use-measure'\n\nfunction App() {\n  const [ref, bounds] = useMeasure()\n\n  // consider that knowing bounds is only possible *after* the view renders\n  // so you'll get zero values on the first run and be informed later\n\n  return \u003cdiv ref={ref} /\u003e\n}\n```\n\n# Api\n\n```jsx\ninterface RectReadOnly {\n  readonly x: number\n  readonly y: number\n  readonly width: number\n  readonly height: number\n  readonly top: number\n  readonly right: number\n  readonly bottom: number\n  readonly left: number\n}\n\ntype Options = {\n  // Debounce events in milliseconds\n  debounce?: number | { scroll: number; resize: number }\n  // React to nested scroll changes, don't use this if you know your view is static\n  scroll?: boolean\n  // You can optionally inject a resize-observer polyfill\n  polyfill?: { new (cb: ResizeObserverCallback): ResizeObserver }\n  // Measure size using offsetHeight and offsetWidth to ignore parent scale transforms\n  offsetSize?: boolean\n}\n\nuseMeasure(\n  options: Options = { debounce: 0, scroll: false }\n): [React.MutableRefObject\u003cHTMLElement | SVGElement\u003e, RectReadOnly]\n```\n\n# ⚠️ Notes\n\n### Resize-observer polyfills\n\nThis lib relies on resize-observers. If you need a polyfill you can either polute the `window` object or inject it cleanly using the config options. We recommend [@juggle/resize-observer](https://github.com/juggle/resize-observer).\n\n```jsx\nimport { ResizeObserver } from '@juggle/resize-observer'\n\nfunction App() {\n  const [ref, bounds] = useMeasure({ polyfill: ResizeObserver })\n```\n\n### Multiple refs\n\nuseMeasure currently returns its own ref. We do this because we are using functional refs for unmount tracking. If you need to have a ref of your own on the same element, use [react-merge-refs](https://github.com/smooth-code/react-merge-refs).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmndrs%2Freact-use-measure","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpmndrs%2Freact-use-measure","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmndrs%2Freact-use-measure/lists"}