Dynamic ViewPort variable in css/sc

viewportUnitVariable.tsx

import React, {
  RefObject,
  useCallback,
  useEffect,
  useRef,
  useState,
} from "react";

import { Portal } from "@mui/base";
import { Box } from "@mui/material";

import log from "@utils/log";

const wv = (v: number) => `calc(var(--wv) * ${v})`;

let ref: RefObject<HTMLElement>;

const getW = (ref: RefObject<HTMLElement>) =>
  ref.current?.getBoundingClientRect()?.width || undefined;

export const useDynamicWv = (
  gRef?: RefObject<HTMLElement>
): number | undefined => {
  const [value, setValue] = useState<number | undefined>(undefined);

  if (gRef) ref = gRef;

  if (!ref) throw Error("Not correct called useDynamicWv");

  const onResize = useCallback(() => {
    setValue(getW(ref));
  }, []);

  useEffect(() => {
    setValue(getW(ref));

    window.addEventListener("resize", onResize);

    return () => {
      window.removeEventListener("resize", onResize);
    };
  }, []);

  return value;
};

export const WV = React.memo(() => {
  const ref = useRef(null);

  useDynamicWv(ref);

  return (
    <>
      <Box
        id="wvportal"
        ref={ref}
        sx={{ position: "absolute", height: 1, width: wv(1) }}
      />
      <Portal container={ref.current}></Portal>
    </>
  );
});
WV.displayName = "BrowserWV";

export default wv;