Function useResizeObserver

useResizeObserver(ref: RefObject<null | HTMLElement>): DOMRectReadOnly

Monitor the size of an element ref.

https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly

Parameters

ref: RefObject<null | HTMLElement>
element ref

Returns DOMRectReadOnly

size and position of a rectangle

Example

import { useResizeObserver } from "@trashpanda001/helpers/react"
import { useRef } from "react"

function Component() {
  const ref = useRef<HTMLDivElement>(null)
  const rect = useResizeObserver(ref)
  console.log(rect)
  return <div ref={ref} style={{ width: "100px", height: "100px" }} />
}