YURI TORIYAMA Portfolio

CSSカスタムプロパティを設定する

CSS JavaScript React
CSSカスタムプロパティ
JavaScript
function setCustomProperty() {
  document.documentElement.style.setProperty("--custom-property", value);
}

setCustomProperty();
window.addEventListener("resize", setCustomProperty);
TSX
"use client";

import { useEffect, useRef } from "react";

export default function Component() {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const el = ref.current;

    const setCustomProperty = () => {
      if (!el) return;

      document.documentElement.style.setProperty("--custom-property", value);
    };

    setCustomProperty();

    const observer = new ResizeObserver(setCustomProperty);

    if (el) observer.observe(el);

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

Loading...