useSize

Returns the width and height of a given element.

Installation

npx rabbithook@latest add use-size

Usage

Typescript

App.tsx

import useSize from "@/hooks/use-size";

function Component() {
  const ref = useRef<HTMLDivElement>(null);

  const {
    bottom,
    height,
    left,
    right,
    top,
    width,
    x,
    y,
  } = useSize(ref);

  return (
    <>
      <div
        ref={ref}
        style={{ width: 200, height: 200, backgroundColor: "red", resize: "both" }}
      />

      <p>Top: { top }</p>
      <p>Bottom: { bottom }</p>
      <p>Left: { left }</p>
      <p>Right: { right }</p>
      <p>Width: { width }</p>
      <p>Height: { height }</p>
      <p>X: { x }</p>
      <p>Y: { y }</p>
    </>
  );
}

Javascript

App.jsx

import useSize from "@/hooks/use-size";

function Component() {
  const ref = useRef();

  const {
    bottom,
    height,
    left,
    right,
    top,
    width,
    x,
    y,
  } = useSize(ref);

  return (
    <>
      <div
        ref={ref}
        style={{ width: 200, height: 200, backgroundColor: "red", resize: "both" }}
      />

      <p>Top: { top }</p>
      <p>Bottom: { bottom }</p>
      <p>Left: { left }</p>
      <p>Right: { right }</p>
      <p>Width: { width }</p>
      <p>Height: { height }</p>
      <p>X: { x }</p>
      <p>Y: { y }</p>
    </>
  );
}

Code

Typescript

use-size.ts

import { RefObject, useState, useEffect } from "react";

interface ISize {
  bottom: number;
  height: number;
  left: number;
  right: number;
  top: number;
  width: number;
  x: number;
  y: number;
}

function useSize(ref: RefObject<Element>) {
  const [size, setSize] = useState({} as ISize);

  useEffect(() => {
    if (ref.current == null) return;

    const observer = new ResizeObserver(([entry]) => setSize(entry.contentRect));
    observer.observe(ref.current);

    return () => observer.disconnect();
  }, [])

  return size;
}

export default useSize;

Javascript

use-size.js

import { useState, useEffect } from "react";

function useSize(ref) {
  const [size, setSize] = useState({});

  useEffect(() => {
    if (ref.current == null) return;

    const observer = new ResizeObserver(([entry]) => setSize(entry.contentRect));
    observer.observe(ref.current);

    return () => observer.disconnect();
  }, [])

  return size;
}

export default useSize;