useResizeObserver

useResizeObserver is a custom hook that tracks changes in the size and position of an element.

{"bottom":0,"height":0,"left":0,"right":0,"top":0,"width":0,"x":0,"y":0}

Click me

const [flg, { toggle }] = useBoolean()
const [ref, rect] = useResizeObserver<HTMLButtonElement>()

return (
  <VStack>
    <Text>{JSON.stringify(rect)}</Text>

    <Center
      bg="bg.contrast"
      color="fg.contrast"
      ref={ref}
      boxSize={flg ? "xs" : "3xs"}
      maxW="full"
      onClick={toggle}
    >
      Click me
    </Center>
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Usage

import { useResizeObserver } from "@yamada-ui/react"

import { useResizeObserver } from "@/components/ui"

import { useResizeObserver } from "@workspaces/ui"

const [ref, rect] = useResizeObserver<HTMLButtonElement>()