{"id":16235010,"url":"https://github.com/asyarb/use-resize-observer","last_synced_at":"2025-03-19T15:30:37.117Z","repository":{"id":34881615,"uuid":"184516223","full_name":"asyarb/use-resize-observer","owner":"asyarb","description":"A small React hook wrapper around the ResizeObserver() browser API.","archived":false,"fork":false,"pushed_at":"2023-01-07T05:09:19.000Z","size":1581,"stargazers_count":7,"open_issues_count":29,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-02-28T19:28:04.649Z","etag":null,"topics":["hooks","react","resizeobserver"],"latest_commit_sha":null,"homepage":null,"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/asyarb.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-05-02T03:35:08.000Z","updated_at":"2024-09-12T16:59:12.000Z","dependencies_parsed_at":"2023-01-15T10:00:49.681Z","dependency_job_id":null,"html_url":"https://github.com/asyarb/use-resize-observer","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asyarb%2Fuse-resize-observer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asyarb%2Fuse-resize-observer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asyarb%2Fuse-resize-observer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asyarb%2Fuse-resize-observer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asyarb","download_url":"https://codeload.github.com/asyarb/use-resize-observer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243999794,"owners_count":20381428,"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":["hooks","react","resizeobserver"],"created_at":"2024-10-10T13:18:29.210Z","updated_at":"2025-03-19T15:30:36.773Z","avatar_url":"https://github.com/asyarb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-resize-observer \u003c!-- omit in toc --\u003e\n\n- [Features](#features)\n- [Installation](#installation)\n- [Usage](#usage)\n    - [Provide a `ref` from `useRef`](#provide-a-ref-from-useref)\n    - [Provide a DOM element](#provide-a-dom-element)\n  - [API](#api)\n- [License](#license)\n\n[![NPM](https://img.shields.io/npm/v/@asyarb/use-resize-observer.svg?\u0026color=green)](https://www.npmjs.com/package/@asyarb/use-resize-observer)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/@asyarb/use-resize-observer.svg?logoColor=brightgreen)\n\nReact implementation of the\n[Resize Observer Interface](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)\nto tell you when an element resizes.\n\n**Demo**: [Code Sandbox](https://codesandbox.io/s/74n0p5xr0j)\n\n# Features\n\n- **Hooks** - Just pass a ref!\n- **Alternative API** - Pass an `Element` and an optional function to handle\n  `ResizeObserver` callbacks.\n- **Typed** - Written with TypeScript!\n\n\u003e ⚠️ This package includes\n\u003e [`resize-observer-polyfill`](https://www.npmjs.com/package/resize-observer-polyfill)\n\u003e for full browser support. This package ponyfills `ResizeObserver` at runtime\n\u003e based on the browser.\n\n# Installation\n\nRun the following:\n\n```bash\n# Yarn\nyarn add @asyarb/use-resize-observer\n\n# NPM\nnpm i @asyarb/use-resize-observer --save\n```\n\n# Usage\n\n### Provide a `ref` from `useRef`\n\nTo observe the resizing of a component, pass a `ref` for a component to\n`useResizeObserver`:\n\n```jsx\nconst Example = () =\u003e {\n  const ref = useRef()\n  const [height, setHeight] = useState(0)\n\n  // Get the content rect directly from the hook:\n  const sizes = useResizeObserver({ ref })\n\n  // Perform any side effect with those sizes!\n  useEffect(() =\u003e void setHeight(sizes.height), [sizes])\n\n  return \u003cdiv ref={ref}\u003eSome content...\u003c/div\u003e\n}\n```\n\n`sizes` will be updated whenever the observed element is resized.\n\nAlternatively, you can pass a function as the second parameter to perform any\nside effect on resize. This function receives the `ResizeObserver` entry\n(`ResizeObserverEntry`) object as an argument.\n\n```jsx\nconst Example = () =\u003e {\n  const ref = useRef\n  const [height, setHeight] = useState(0)\n\n  // Provide an optional callback to perform side effects instead:\n  useResizeObserver({\n    ref,\n    callback: entry =\u003e setHeight(entry.contentRect.height),\n  })\n\n  return \u003cdiv ref={ref}\u003eSome content...\u003c/div\u003e\n}\n```\n\n### Provide a DOM element\n\n`useResizeObserver` can alternatively take an `HTMLElement` such as the return\nvalue from `document.querySelector()`.\n\n```jsx\nconst element = document.querySelector('.someClass')\n\nconst Example = () =\u003e {\n  const [height, setHeight] = useState(0)\n\n  // Pass an HTMLElement directly:\n  const sizes = useResizeObserver({ element })\n\n  // Perform any side effect with that element's sizes!\n  useEffect(() =\u003e void setHeight(sizes.height), [sizes])\n\n  return \u003cdiv ref={ref}\u003eSome content...\u003c/div\u003e\n}\n```\n\nJust like the previous example, you can also provide a callback function.\n\n## API\n\n| Argument   | Required | Description                                                                                                     |\n| ---------- | :------: | --------------------------------------------------------------------------------------------------------------- |\n| `ref`      |    NP    | React `ref` to observe.                                                                                         |\n| `element`  |    No    | HTML `Element` to observe. If both `ref` and `element` are provided, `ref` is prioritized.                      |\n| `callback` |    No    | Optional callback to fire on resize. Receives the `ResizeObserverEntry` for the observed element as an argument |\n\n# License\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasyarb%2Fuse-resize-observer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasyarb%2Fuse-resize-observer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasyarb%2Fuse-resize-observer/lists"}