measure-dom-node.ts

const containerStyle = {
  display: "inline-block",
  position: "absolute",
  visibility: "hidden",
  zIndex: -1,
};

interface IEnhanceMeasurableNodeCallback {
  (e: Node): Node;
}

export const measureDomNode = (
  node: HTMLElement,
  enhanceMeasurableNode: IEnhanceMeasurableNodeCallback = (e) => e
) => {
  const container = document.createElement("div");

  Object.entries(containerStyle).forEach(([prop, value]) => {
    // @ts-ignore
    container.style[prop] = value;
  });

  const clonedNode = node.cloneNode(true);
  const content = enhanceMeasurableNode(clonedNode);

  container.appendChild(content);

  if (node.parentNode) {
    node.parentNode.appendChild(container);
  } else {
    document.body.appendChild(container);
  }

  const height = container.clientHeight;
  const width = container.clientWidth;

  container.parentNode?.removeChild(container);
  return { height, width };
};