@modern-kit/react/dist/hooks/useComputedStyleObserver/index.d.ts

modern-kit/react

import React__default from 'react';

interface UseComputedStyleObserverReturnType<T extends HTMLElement> {
    ref: React__default.RefObject<T>;
    value: string;
    setValue: (value: string) => void;
}
/**
 * @description 관찰할 타겟 요소의 특정 computed style 값을 실시간으로 관찰하고 관리하는 React 훅
 *
 * MutationObserver를 사용하여 요소의 스타일 속성이 변경될 때 콜백을 호출합니다.
 * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe
 *
 * @template T - 관찰할 HTML 요소 타입, 기본적으로 `HTMLElement`를 상속합니다.
 * @param {string} key - 관찰할 스타일 속성 키
 * @returns {UseComputedStyleObserverReturnType<T>} 다음을 포함하는 객체:
 * - `ref`: 관찰할 타겟 요소에 전달할 ref
 * - `value`: 현재 계산된 스타일 속성 값
 * - `setValue`: 관찰중인 스타일 속성 Key에 해당하는 속성 값을 업데이트하는 함수
 *
 * @example
 * ```tsx
 * const Example = () => {
 *   const { ref, value, setValue } = useComputedStyleObserver<HTMLDivElement>('color');
 *
 *   return (
 *     <div ref={ref} style={{ color: "black" }}>
 *       현재 글자 색상: {value}
 *       <button onClick={() => setValue('red')}>빨간색으로 변경</button>
 *     </div>
 *   );
 * };
 * ```
 */
declare function useComputedStyleObserver<T extends HTMLElement>(key: string): UseComputedStyleObserverReturnType<T>;

export { useComputedStyleObserver };