Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

useResizeObserver

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

Source@yamada-ui/use-resize-observer

Import

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

Usage

Editable example

const [flg, { toggle }] = useBoolean()

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

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

    <Button
      ref={ref}
      mt="md"
      onClick={toggle}
      w={flg ? "xl" : "sm"}
      h={flg ? "xl" : "sm"}
    >
      Click me to toggle the boolean value
    </Button>
  </>
)
Copied!

Edit this page on GitHub

PrevioususePromiseDisclosureNextuseSnacks