useElementInfo

Provides information about a DOM element, such as size, position, or bounding box.

Usage

Basic usage example to quickly see how the useElementInfo works.

Element Information :

Component Name=<>

hovered="false"

Attributes:

Rect Information:

Window Size:

Width="0", Height="0"

Scroll Positions:

Scroll Position (Element)="0"

Scroll Position (Body)="0"

"use client";
import { Textarea } from "@/ui/textarea";
import { Typography } from "@/ui/typography";
import { useElementInfo } from "@/hooks/use-element-info";

export function UseElementInfoDemo() {
  const info = useElementInfo<HTMLTextAreaElement>();

  return (
    <div className="m-auto flex h-[35rem] size-full relative items-center justify-center [&_*]:font-geist-mono">
      <Textarea
        ref={info.ref}
        id="box"
        readOnly
        unstyled
        autosize={false}
        placeholder="resize box"
        data-custom-attribute="customValue"
        className="absolute z-9 m-0 min-h-9 min-w-28 resize place-content-center rounded-lg border bg-muted/50 placeholder:text-center placeholder:uppercase focus-visible:outline-0 focus-visible:ring-0"
        onMouseEnter={info.onMouseEnter}
        onMouseLeave={info.onMouseLeave}
      />

      <div suppressHydrationWarning className="absolute left-4 top-4 mb-auto flex flex-col text-xs [&_*]:font-roboto-mono">
        <Typography prose="muted" className="mt-2">Element Information :</Typography>
        <p>Component Name=&lt;{info.elementName}&gt;</p>
        <p>hovered=&quot;{info.hovered ? "true" : "false"}&quot;</p>

        <Typography prose="muted" className="mt-2">Attributes :</Typography>
        <ul>
          {Object.entries(info.attributes).map(([key, value]) => (
            <li key={key}>{key}=&quot;{value}&quot;</li>
          ))}
        </ul>

        <Typography prose="muted" className="mt-2">Rect Information :</Typography>
        <ul>
          {Object.entries(info.rect).map(([key, value]) => (
            <li key={key}>{key}=&quot;{value}&quot;</li>
          ))}
        </ul>

        <Typography prose="muted" className="mt-2">Window Size :</Typography>
        <p>
          Width=&quot;{info.windowSize.width}&quot;, Height=&quot;
          {info.windowSize.height}&quot;
        </p>

        <Typography prose="muted" className="mt-2">Scroll Positions :</Typography>
        <p>Scroll Position (Element)=&quot;{info.scrollPosition}&quot;</p>
        <p>Scroll Position (Body)=&quot;{info.scrollBody}&quot;</p>
      </div>
    </div>
  );
}

Necessary to define a ref on the related element to pass getBoundingClientRect(). The rect returned value is a DOMRect object which is the smallest rectangle which contains the entire element, including its padding and border-width.

windowSize returns the interior width and height of the window in pixels (that is, the width and height of the window's layout viewport). The read-only innerWidth and innerHeight property of the Window interface returns the interior height of the window in pixels, that includes the width of the vertical scroll bar, if one is present and the height of the horizontal scroll bar, if present.

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

use-element-info.ts