{"id":13564463,"url":"https://github.com/reach/observe-rect","last_synced_at":"2025-05-15T11:06:29.246Z","repository":{"id":32583973,"uuid":"135795685","full_name":"reach/observe-rect","owner":"reach","description":"Observe the Rect of a DOM Element","archived":false,"fork":false,"pushed_at":"2023-01-07T04:05:12.000Z","size":2897,"stargazers_count":401,"open_issues_count":14,"forks_count":15,"subscribers_count":4,"default_branch":"develop","last_synced_at":"2025-05-15T11:06:28.168Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reach.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-02T07:04:29.000Z","updated_at":"2024-12-10T14:15:19.000Z","dependencies_parsed_at":"2023-01-14T21:39:36.194Z","dependency_job_id":null,"html_url":"https://github.com/reach/observe-rect","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reach%2Fobserve-rect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reach%2Fobserve-rect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reach%2Fobserve-rect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reach%2Fobserve-rect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reach","download_url":"https://codeload.github.com/reach/observe-rect/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254328385,"owners_count":22052632,"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":[],"created_at":"2024-08-01T13:01:31.779Z","updated_at":"2025-05-15T11:06:29.222Z","avatar_url":"https://github.com/reach.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://reach.tech\"\u003e\n    \u003cimg alt=\"Reach observeRect\" src=\"./logo.png\" width=\"400\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Observe the rect of a DOM element.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@reach/observe-rect\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@reach/observe-rect.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@reach/observe-rect\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/@reach/observe-rect.svg?style=flat-square\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./demo.gif\" alt=\"Demo\"/\u003e\n\u003c/p\u003e\n\n## Installation\n\n```\nnpm install @reach/observe-rect\n# or\nyarn add @reach/observe-rect\n```\n\n## Usage\n\n```js\nimport observeRect from \"@reach/observe-rect\";\n\nlet node = document.getElementById(\"some-node\");\n\nlet rectObserver = observeRect(node, rect =\u003e {\n  console.log(\"left\", rect.left);\n  console.log(\"top\", rect.top);\n  console.log(\"height\", rect.height);\n  console.log(\"width\", rect.width);\n});\n\n// start observing\nrectObserver.observe();\n\n// stop observing\nrectObserver.unobserve();\n```\n\n## About\n\nA lot of things can change the position or size of an element, like scrolling, content reflows and user input. This utility observes and notifies you when your element's rect changes.\n\n## Legal\n\nMIT License\nCopyright (c) 2018-present, Ryan Florence\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freach%2Fobserve-rect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freach%2Fobserve-rect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freach%2Fobserve-rect/lists"}