React hook that watches for updates and returns element size.

README.md

@actualwave/use-element-size

React hook that watches for changes in element size using ResizeObserver and reports updates forcing component to render. There are two hooks in this package

• useResizeObserver(handlerFn, elementRef) -- Calls handlerFn() when element size changed with instance of DOMRectReadOnly.
• useElementSize(elementRef, reinitInEffect = true) -- Returns element size or null if elementRef.current does not contain reference to HTMLElement. reinitInEffect forces immediate re-render to apply element sizes, expected to have a valid reference at the time of re-render.

Example on codesandbox.io.

index.d.ts

import { MutableRefObject } from '@types/react';

export declare const getElementDimensions = (el: HTMLElement) => { width: number, height: number };

export declare const useResizeObserver = (
  handler: (list: DOMRectReadOnly) => void, 
  elRef: MutableRefObject<HTMLElement>
) => void;

export declare const useElementSize = (
  elRef: MutableRefObject<HTMLElement>,
  reinitInEffect?: boolean
) => { width: number, height: number } | null;

index.js

import { useState, useMemo, useEffect, useCallback } from 'react';

const getSizeOnly = ({ width, height }) => ({ width, height });

export const getElementDimensions = (el) => {
  if (!el) {
    return { width: 0, height: 0 };
  }

  return getSizeOnly(el.getBoundingClientRect());
};

export const useResizeObserver = (handler, elRef) => {
  const observer = useMemo(() => {
    if (!elRef.current) {
      return null;
    }

    return new ResizeObserver(handler);
  }, [handler, elRef.current]);

  useEffect(() => {
    if (!observer) {
      return;
    }

    observer.observe(elRef.current);

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

export const useElementSize = (elRef, reinitInEffect = true) => {
  let [size, setSize] = useState(null);

  const handler = useCallback(
    ([{ borderBox, contentRect }]) => {
      let size;
      if (contentRect) {
        size = getSizeOnly(contentRect);
      } else {
        size = borderBox.reduce(
          ({ width, height }, { inlineSize, blockSize }) => ({
            width: width + inlineSize,
            height: height > blockSize ? height : blockSize
          }),
          { width: 0, height: 0 }
        );
      }

      setSize(size);
    },
    [setSize]
  );

  useResizeObserver(handler, elRef);

  useEffect(() => {
    if (reinitInEffect) {
      setSize(getElementDimensions(elRef.current));
    }
  }, []);

  return size;
};

package.json

{
  "name": "@actualwave/use-element-size",
  "version": "0.0.1",
  "description": "React hook that watches for updates and returns element size.", 
  "main": "index.js",
  "module": "index.js",
  "types": "index.d.ts",
  "keywords": [
    "react",
    "element",
    "size",
    "resize",
    "event",
    "hook"
  ],
  "peerDependencies": {
    "react": ">=16.8.0",
    "@types/react": ">=16.8.0"
  },
  "homepage": "https://gist.github.com/burdiuz/9d88b6960552bea7ce5070c0d9549f77",
  "bugs": {
    "url": "https://gist.github.com/burdiuz/9d88b6960552bea7ce5070c0d9549f77",
    "email": "[email protected]"
  },
  "license": "MIT",
  "author": "Oleg Galaburda <[email protected]> (http://actualwave.com/)"
}