How to use the @react-md/utils.getViewportSize function in @react-md/utils

(container: HTMLElement) => {
      const { top, left } = container.getBoundingClientRect();

      let nextPosition = defaultPosition;
      const vh = getViewportSize("height");
      const vw = getViewportSize("width");
      switch (defaultPosition) {
        case "above":
          if (top < vh - vh * threshold) {
            nextPosition = "below";
          }
          break;
        case "below":
          if (top > vh * threshold) {
            nextPosition = "above";
          }
          break;
        case "left":
          if (left < vw - vw * threshold) {
            nextPosition = "right";
          }

onScroll: event => {
      if (onScroll) {
        const container = getFixedTo(fixedTo);
        const rect = container && container.getBoundingClientRect();
        let visible = false;
        if (rect) {
          const { vhMargin = 16, vwMargin = 16 } = remainingOptions;
          const vh = getViewportSize("height");
          const vw = getViewportSize("width");
          const { top, left } = rect;

          visible =
            top >= vhMargin &&
            top <= vh - vhMargin &&
            left >= vwMargin &&
            left <= vw - vwMargin;
        }

        onScroll(event, {
          element: element.current,
          fixedTo: container,
          visible,
        });
      }

(container: HTMLElement) => {
      const { top, left } = container.getBoundingClientRect();

      let nextPosition = defaultPosition;
      const vh = getViewportSize("height");
      const vw = getViewportSize("width");
      switch (defaultPosition) {
        case "above":
          if (top < vh - vh * threshold) {
            nextPosition = "below";
          }
          break;
        case "below":
          if (top > vh * threshold) {
            nextPosition = "above";
          }
          break;
        case "left":
          if (left < vw - vw * threshold) {
            nextPosition = "right";
          }
          break;

onScroll: event => {
      if (onScroll) {
        const container = getFixedTo(fixedTo);
        const rect = container && container.getBoundingClientRect();
        let visible = false;
        if (rect) {
          const { vhMargin = 16, vwMargin = 16 } = remainingOptions;
          const vh = getViewportSize("height");
          const vw = getViewportSize("width");
          const { top, left } = rect;

          visible =
            top >= vhMargin &&
            top <= vh - vhMargin &&
            left >= vwMargin &&
            left <= vw - vwMargin;
        }

        onScroll(event, {
          element: element.current,
          fixedTo: container,
          visible,
        });
      }

return position;
  } else if (!container) {
    return "below";
  }

  const rect = container.getBoundingClientRect();
  if (rect.top > getViewportBounds("height", vhMargin)) {
    return "above";
  }

  let { left, right } = rect;
  const tooltip = document.getElementById(id);
  if (tooltip) {
    const { offsetWidth } = tooltip;
    const spacing = unitToNumber(getSpacing(config));
    const vw = getViewportSize("width");
    if (
      left + offsetWidth + spacing > vw &&
      right - offsetWidth - spacing < 0
    ) {
      return "below";
    }

    const halvedWidth = (tooltip as HTMLSpanElement).offsetWidth / 2;
    left -= halvedWidth;
    right += halvedWidth;
  }

  if (left < getViewportBounds("width", vwMargin)) {
    return "right";
  } else if (right > getViewportBounds("width", vwMargin, false)) {
    return "left";