Skip to content

Instantly share code, notes, and snippets.

@morajabi morajabi/useRect.js
Created Feb 18, 2019

Embed
What would you like to do?
useRect — getBoundingClientRect() React Hook with resize handler
import { useLayoutEffect, useCallback, useState } from 'react'
export const useRect = (ref) => {
const [rect, setRect] = useState(getRect(ref ? ref.current : null))
const handleResize = useCallback(() => {
if (!ref.current) {
return
}
// Update client rect
setRect(getRect(ref.current))
}, [ref])
useLayoutEffect(() => {
const element = ref.current
if (!element) {
return
}
handleResize()
if (typeof ResizeObserver === 'function') {
let resizeObserver = new ResizeObserver(() => handleResize())
resizeObserver.observe(element)
return () => {
if (!resizeObserver) {
return
}
resizeObserver.disconnect()
resizeObserver = null
}
} else {
// Browser support, remove freely
window.addEventListener('resize', handleResize)
return () => {
window.removeEventListener('resize', handleResize)
}
}
}, [ref.current])
return rect
}
function getRect(element) {
if (!element) {
return {
bottom: 0,
height: 0,
left: 0,
right: 0,
top: 0,
width: 0,
}
}
return element.getBoundingClientRect()
}
@intelliapps-io

This comment has been minimized.

Copy link

commented Jul 26, 2019

I made some changes so it can be used with TypeScript. https://codesandbox.io/s/userect-hook-1y5t7

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.