@modern-kit/react/dist/hooks/useComputedStyleObserver/index.cjs

modern-kit/react

'use strict';

var React = require('react');

function useComputedStyleObserver(key) {
  const ref = React.useRef(null);
  const observerRef = React.useRef(null);
  const [value, setValue] = React.useState("");
  const setStyleValue = React.useCallback(
    (value2) => {
      if (!ref.current) return;
      const targetElement = ref.current;
      targetElement.style.setProperty(key, value2);
      setValue(value2);
    },
    [key]
  );
  const updateStyleValue = React.useCallback(() => {
    if (!ref.current) return;
    const targetElement = ref.current;
    const computedStyle = window.getComputedStyle(targetElement);
    const value2 = computedStyle.getPropertyValue(key).trim();
    setValue(value2);
  }, [key]);
  React.useEffect(() => {
    if (!ref.current) return;
    const element = ref.current;
    updateStyleValue();
    observerRef.current = new MutationObserver(updateStyleValue);
    observerRef.current.observe(element, {
      attributeFilter: ["style", "class"]
      // style, class 속성 변경을 관찰
    });
    return () => {
      observerRef.current?.disconnect();
    };
  }, [updateStyleValue]);
  return { ref, value, setValue: setStyleValue };
}

exports.useComputedStyleObserver = useComputedStyleObserver;
//# sourceMappingURL=index.cjs.map