jaredpalmer / jaredpalmer/the-platform

resize hook

Open
#49 2 comments 7 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.4k
Forks
106
PR merge metrics
No merged PRs in 30d

Description

I've been using this hook

```jsx
function useContentRect (ref) {
const [contentRect, setContentRect] = useState(ref.current ? ref.current.getBoundingClientRect() : {});
useEffect(() => {
if (!ref.current) return;
const observer = new window.ResizeObserver(entries => setContentRect(entries[0].contentRect));
observer.observe(ref.current);
return () => observer.disconnect(ref.current);
}, [ref]);
return contentRect;
}
```
To measure elements and react on size changes. Can be used as
```jsx
function Component () {
const ref = useRef(null);
const { width, height } = useContentRect(ref);
return

{width} {height}
;
}
```
Looks like something like this could be a nice addition to this library. If not, feel free to just close and ignore. 🙂

Contributor guide

No contributing guide indexed for this repository

Research direction

The issue names no repository file, test, or entry point, so first locate how this library organizes and exports hooks. Compare the proposed behavior with existing hook patterns; done should mean the resize hook is added in the expected public location and its size-change behavior is verified.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.