useResizeObserver

useResizeObserverは、要素のサイズと位置の変更を追跡するカスタムフックです。

{"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>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

使い方

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

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

import { useResizeObserver } from "@workspaces/ui"

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