@modern-kit/react
Version:
1 lines • 4.12 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../../../src/hooks/useComputedStyleObserver/index.ts"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface UseComputedStyleObserverReturnType<T extends HTMLElement> {\n ref: React.RefObject<T>;\n value: string;\n setValue: (value: string) => void;\n}\n\n/**\n * @description 관찰할 타겟 요소의 특정 computed style 값을 실시간으로 관찰하고 관리하는 React 훅\n *\n * MutationObserver를 사용하여 요소의 스타일 속성이 변경될 때 콜백을 호출합니다.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe\n *\n * @template T - 관찰할 HTML 요소 타입, 기본적으로 `HTMLElement`를 상속합니다.\n * @param {string} key - 관찰할 스타일 속성 키\n * @returns {UseComputedStyleObserverReturnType<T>} 다음을 포함하는 객체:\n * - `ref`: 관찰할 타겟 요소에 전달할 ref\n * - `value`: 현재 계산된 스타일 속성 값\n * - `setValue`: 관찰중인 스타일 속성 Key에 해당하는 속성 값을 업데이트하는 함수\n *\n * @example\n * ```tsx\n * const Example = () => {\n * const { ref, value, setValue } = useComputedStyleObserver<HTMLDivElement>('color');\n *\n * return (\n * <div ref={ref} style={{ color: \"black\" }}>\n * 현재 글자 색상: {value}\n * <button onClick={() => setValue('red')}>빨간색으로 변경</button>\n * </div>\n * );\n * };\n * ```\n */\nexport function useComputedStyleObserver<T extends HTMLElement>(\n key: string\n): UseComputedStyleObserverReturnType<T> {\n const ref = useRef<T>(null);\n const observerRef = useRef<MutationObserver | null>(null);\n const [value, setValue] = useState('');\n\n const setStyleValue = useCallback(\n (value: string) => {\n if (!ref.current) return;\n const targetElement = ref.current;\n\n targetElement.style.setProperty(key, value);\n setValue(value);\n },\n [key]\n );\n\n const updateStyleValue = useCallback(() => {\n if (!ref.current) return;\n const targetElement = ref.current;\n\n const computedStyle = window.getComputedStyle(targetElement);\n const value = computedStyle.getPropertyValue(key).trim();\n\n setValue(value);\n }, [key]);\n\n useEffect(() => {\n if (!ref.current) return;\n\n const element = ref.current;\n\n updateStyleValue();\n observerRef.current = new MutationObserver(updateStyleValue);\n\n observerRef.current.observe(element, {\n attributeFilter: ['style', 'class'], // style, class 속성 변경을 관찰\n });\n\n return () => {\n observerRef.current?.disconnect();\n };\n }, [updateStyleValue]);\n\n return { ref, value, setValue: setStyleValue };\n}\n"],"names":["useRef","useState","useCallback","value","useEffect"],"mappings":";;;;AAmCO,SAAS,yBACd,GAAA,EACuC;AACvC,EAAA,MAAM,GAAA,GAAMA,aAAU,IAAI,CAAA;AAC1B,EAAA,MAAM,WAAA,GAAcA,aAAgC,IAAI,CAAA;AACxD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,eAAS,EAAE,CAAA;AAErC,EAAA,MAAM,aAAA,GAAgBC,iBAAA;AAAA,IACpB,CAACC,MAAAA,KAAkB;AACjB,MAAA,IAAI,CAAC,IAAI,OAAA,EAAS;AAClB,MAAA,MAAM,gBAAgB,GAAA,CAAI,OAAA;AAE1B,MAAA,aAAA,CAAc,KAAA,CAAM,WAAA,CAAY,GAAA,EAAKA,MAAK,CAAA;AAC1C,MAAA,QAAA,CAASA,MAAK,CAAA;AAAA,IAChB,CAAA;AAAA,IACA,CAAC,GAAG;AAAA,GACN;AAEA,EAAA,MAAM,gBAAA,GAAmBD,kBAAY,MAAM;AACzC,IAAA,IAAI,CAAC,IAAI,OAAA,EAAS;AAClB,IAAA,MAAM,gBAAgB,GAAA,CAAI,OAAA;AAE1B,IAAA,MAAM,aAAA,GAAgB,MAAA,CAAO,gBAAA,CAAiB,aAAa,CAAA;AAC3D,IAAA,MAAMC,MAAAA,GAAQ,aAAA,CAAc,gBAAA,CAAiB,GAAG,EAAE,IAAA,EAAK;AAEvD,IAAA,QAAA,CAASA,MAAK,CAAA;AAAA,EAChB,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAER,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAI,OAAA,EAAS;AAElB,IAAA,MAAM,UAAU,GAAA,CAAI,OAAA;AAEpB,IAAA,gBAAA,EAAiB;AACjB,IAAA,WAAA,CAAY,OAAA,GAAU,IAAI,gBAAA,CAAiB,gBAAgB,CAAA;AAE3D,IAAA,WAAA,CAAY,OAAA,CAAQ,QAAQ,OAAA,EAAS;AAAA,MACnC,eAAA,EAAiB,CAAC,OAAA,EAAS,OAAO;AAAA;AAAA,KACnC,CAAA;AAED,IAAA,OAAO,MAAM;AACX,MAAA,WAAA,CAAY,SAAS,UAAA,EAAW;AAAA,IAClC,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,gBAAgB,CAAC,CAAA;AAErB,EAAA,OAAO,EAAE,GAAA,EAAK,KAAA,EAAO,QAAA,EAAU,aAAA,EAAc;AAC/C;;;;"}