README.md

  const [size, toolbarRef] = useElementInlineResized<'small' | 'medium' | 'full', HTMLDivElement>({
    match: {
      small: 250,
      medium: 544,
      full: Infinity,
    },
  });

use-element-inline-resized.ts

import {RefObject, useEffect, useRef, useState} from 'react';
import {throttle} from 'lodash';

export default function useElementInlineResized<Size extends string, T extends HTMLElement>({
  match,
  onMatched,
  ref,
  throttleMs,
}: {
  match: Record<Size, number>;
  onMatched?: (size: Size) => void;
  ref?: RefObject<T>;
  throttleMs?: number;
}): [Size, RefObject<T>] {
  const backupRef = useRef<T>(null);
  const actualRef = ref ?? backupRef;
  const [size, setSize] = useState<Size | null>(null);

  useEffect(() => {
    const resizeObserver = new ResizeObserver(
      throttle((entries) => {
        if (!actualRef.current) {
          return;
        }

        afterReflow(() => {
          const matches = Object.entries(match);
          const foundEntry = matches.find(([, value]) => {
            return entries.length && entries[0].borderBoxSize[0].inlineSize <= value;
          });

          if (foundEntry) {
            onMatched ? onMatched(foundEntry[0] as Size) : setSize(foundEntry[0] as Size);
          }
        });
      }, throttleMs ?? 100)
    );

    if (actualRef.current && actualRef.current instanceof Element) {
      resizeObserver.observe(actualRef.current, {box: 'border-box'});
    }

    return () => resizeObserver.disconnect();
  }, [actualRef.current]);

  return [size, actualRef];
}

function afterReflow(callback) {
  window.setTimeout(() => {
    window.requestAnimationFrame(callback);
  }, 0);
}