{"id":13632604,"url":"https://github.com/steveruizok/use-motion-resize-observer","last_synced_at":"2026-01-10T16:07:57.552Z","repository":{"id":40722684,"uuid":"277063304","full_name":"steveruizok/use-motion-resize-observer","owner":"steveruizok","description":" A React hook that allows you to use a ResizeObserver to measure an element's size.","archived":false,"fork":true,"pushed_at":"2020-12-20T21:37:58.000Z","size":380,"stargazers_count":20,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-01T22:53:55.118Z","etag":null,"topics":["layout","motion","panels","panes"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"ZeeCoder/use-resize-observer","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/steveruizok.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":"2020-07-04T07:40:57.000Z","updated_at":"2022-09-24T16:15:17.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/steveruizok/use-motion-resize-observer","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveruizok%2Fuse-motion-resize-observer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveruizok%2Fuse-motion-resize-observer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveruizok%2Fuse-motion-resize-observer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveruizok%2Fuse-motion-resize-observer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/steveruizok","download_url":"https://codeload.github.com/steveruizok/use-motion-resize-observer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223772291,"owners_count":17199976,"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":["layout","motion","panels","panes"],"created_at":"2024-08-01T22:03:08.542Z","updated_at":"2026-01-10T16:07:57.546Z","avatar_url":"https://github.com/steveruizok.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# use-motion-resize-observer\n\nA fork of [use-resize-observer](https://github.com/ZeeCoder/use-resize-observer) that uses Motion Values from Framer Motion.\n\n## What's different?\n\nUnlike `useMotionResizeObserver`, the hook will **not** trigger a re-render on all changes to the target element's width and / or height. Instead, it will update the `height` and `width` motion values. You can use these values to drive other changes to `motion` components.\n\n## In Action\n\n[CodeSandbox Demo](https://codesandbox.io/s/use-motion-resize-observer-basic-usage-cmfdi)\n\n## Install\n\n```sh\nyarn add use-motion-resize-observer --dev\n# or\nnpm install use-motion-resize-observer --save-dev\n```\n\n## Basic Usage\n\nNote that the default builds are not polyfilled! For instructions and alternatives, see the [Transpilation / Polyfilling](#transpilation--polyfilling) section.\n\n```js\nimport React from \"react\";\nimport useMotionResizeObserver from \"use-motion-resize-observer\";\nimport { motion, useTransform } from \"framer-motion\";\n\nconst App = () =\u003e {\n  const { ref, width, height } = useMotionResizeObserver({\n    initial: { width: 100, height: 100 },\n  });\n\n  const background = useTransform(width, [100, 300], [\"#52cb9a\", \"#2d8a9a\"]);\n\n  return \u003cmotion.div ref={ref} style={{ background }} /\u003e;\n};\n```\n\n## Passing in Your Own `ref`\n\nYou can pass in your own ref instead of using the one provided.\nThis can be useful if you already have a ref you want to measure.\n\n```js\nconst ref = useRef(null);\nconst { width, height } = useMotionResizeObserver({ ref });\n```\n\nYou can even reuse the same hook instance to measure different elements:\n\n[CodeSandbox Demo](https://codesandbox.io/s/use-resize-observer-changing-measured-ref-or4uj)\n\n## The \"onResize\" callback\n\nYou can provide an `onResize` callback function, which will receive the width and height of the element as numbers (not motion values) when it changes, so\nthat you can decide what to do with it:\n\n```js\nimport React from \"react\";\nimport useMotionResizeObserver from \"use-motion-resize-observer\";\n\nconst App = () =\u003e {\n  const { ref } = useMotionResizeObserver({\n    onResize: ({ width, height }) =\u003e {\n      // do something here.\n    },\n  });\n\n  return \u003cdiv ref={ref} /\u003e;\n};\n```\n\n## Defaults (SSR)\n\nOn initial mount the ResizeObserver will take a little time to report on the\nactual size.\n\nUntil the hook receives the first measurement, it returns `0` for width\nand height by default.\n\nYou can override this behaviour, which could be useful for SSR as well.\n\n```js\nconst { ref, width, height } = useMotionResizeObserver({\n  initial: { width: 100, height: 50 },\n});\n```\n\nHere \"width\" and \"height\" motion values will be 100 and 50 respectively, until the ResizeObserver kicks in and reports the actual size.\n\n## Without Defaults\n\nIf you only want real measurements (only values from the ResizeObserver without\nany default values), then you can just leave defaults off:\n\n```js\nconst { ref, width, height } = useMotionResizeObserver();\n```\n\nHere the \"width\" and \"height\" motion values will have `0` values until the ResizeObserver takes its first measurement.\n\n```js\nconst { ref, width, height } = useMotionResizeObserver();\n```\n\n## Container/Element Query with CSS-in-JS\n\nIt's possible to apply styles conditionally based on the width / height of an\nelement using a CSS-in-JS solution, which is the basic idea behind\ncontainer/element queries:\n\n[CodeSandbox Demo](https://codesandbox.io/s/use-resize-observer-container-query-with-css-in-js-b8slq)\n\n...but this is much easier with `motion` elements from Framer Motion.\n\n```jsx\nconst { ref, width, height } = useMotionResizeObserver();\nconst background = useTransform(width, [100, 300], [\"#52cb9a\", \"#2d8a9a\"]);\n\nreturn \u003cmotion.div ref={ref} style={{ background }} /\u003e;\n```\n\n## Changing State\n\nThe goal of Framer Motion is to allow for visual data to flow without triggering component re-renders by avoiding React's state/props. That said, if you _do_ want to change state, you can use the `onResize` callback.\n\n```js\nconst { ref, width, height } = useMotionResizeObserver({\n  onResize: (size) =\u003e setSize(size),\n});\n```\n\n[CodeSandbox Demo](https://codesandbox.io/s/use-motion-resize-observer-changing-state-sg8qb)\n\n## Transpilation / Polyfilling\n\nBy default the library provides transpiled ES5 modules in CJS / ESM module formats.\n\nPolyfilling is recommended to be done in the host app, and not within imported\nlibraries, as that way consumers have control over the exact polyfills being used.\n\nThat said, there's a [polyfilled](https://github.com/que-etc/resize-observer-polyfill)\nCJS module that can be used for convenience (Not affecting globals):\n\n```js\nimport useMotionResizeObserver from \"use-motion-resize-observer/polyfilled\";\n```\n\n## Related\n\n- [@zeecoder/use-resize-observer](https://github.com/ZeeCoder/container-query)\n- [@zeecoder/container-query](https://github.com/ZeeCoder/container-query)\n- [@zeecoder/react-resize-observer](https://github.com/ZeeCoder/react-resize-observer)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteveruizok%2Fuse-motion-resize-observer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteveruizok%2Fuse-motion-resize-observer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteveruizok%2Fuse-motion-resize-observer/lists"}