jaredpalmer / jaredpalmer/the-platform
resize hook
- 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
}
```
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