@modern-kit/react
Version:
1 lines • 3.32 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../src/hooks/useResizeObserver/index.ts"],"sourcesContent":["import { noop } from '@modern-kit/utils';\nimport { usePreservedCallback } from '../usePreservedCallback';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface UseResizeObserver<T extends HTMLElement> {\n ref: React.RefObject<T>;\n contentRect: ContentRect;\n}\n\ntype ContentRect = Omit<DOMRectReadOnly, 'toJSON'>;\n\nconst initialState: ContentRect = {\n bottom: 0,\n height: 0,\n left: 0,\n right: 0,\n top: 0,\n width: 0,\n x: 0,\n y: 0,\n};\n\n/**\n * @description 지정된 타겟 요소의 크기 변화를 감지하는 React 커스텀 훅입니다.\n * 이 훅은 `ResizeObserver` API를 사용하여 요소의 크기가 변경될 때마다 특정 액션을 호출 할 수 있습니다.\n *\n * @template T - 관찰하려는 타겟 요소의 타입\n * @param {((entry: ResizeObserverEntry) => void) | undefined} [action] - 요소의 크기가 변경될 때마다 호출되는 콜백 함수. `ResizeObserverEntry` 객체를 인자로 받습니다.\n *\n * @returns {UseResizeObserver<T>} 타겟 요소에 대한 참조 객체(`ref`)와 해당 요소의 현재 크기 정보(`contentRect`)입니다.\n *\n * @example\n * ```tsx\n * const { ref, contentRect } = useResizeObserver<HTMLDivElement>();\n *\n * return (\n * <div ref={ref}>\n * <p>Width: {contentRect.width}</p>\n * <p>Height: {contentRect.height}</p>\n * </div>\n * );\n * ```\n */\nexport function useResizeObserver<T extends HTMLElement>(\n action: (entry: ResizeObserverEntry) => void = noop\n): UseResizeObserver<T> {\n const [contentRect, setContentRect] = useState<ContentRect>(initialState);\n const targetRef = useRef<T>(null);\n\n const preservedCallbackAction = usePreservedCallback(\n ([entry]: ResizeObserverEntry[]) => {\n if (!entry) return;\n\n action(entry);\n setContentRect(entry.contentRect);\n }\n );\n\n useEffect(() => {\n if (!targetRef.current) {\n return;\n }\n\n const targetElement = targetRef.current;\n\n const observer = new ResizeObserver(preservedCallbackAction);\n\n observer.observe(targetElement);\n\n return () => {\n observer.unobserve(targetElement);\n };\n }, [preservedCallbackAction]);\n\n return { ref: targetRef, contentRect };\n}\n"],"names":[],"mappings":";;;;AAWA,MAAM,YAAA,GAA4B;AAAA,EAChC,MAAA,EAAQ,CAAA;AAAA,EACR,MAAA,EAAQ,CAAA;AAAA,EACR,IAAA,EAAM,CAAA;AAAA,EACN,KAAA,EAAO,CAAA;AAAA,EACP,GAAA,EAAK,CAAA;AAAA,EACL,KAAA,EAAO,CAAA;AAAA,EACP,CAAA,EAAG,CAAA;AAAA,EACH,CAAA,EAAG;AACL,CAAA;AAuBO,SAAS,iBAAA,CACd,SAA+C,IAAA,EACzB;AACtB,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAsB,YAAY,CAAA;AACxE,EAAA,MAAM,SAAA,GAAY,OAAU,IAAI,CAAA;AAEhC,EAAA,MAAM,uBAAA,GAA0B,oBAAA;AAAA,IAC9B,CAAC,CAAC,KAAK,CAAA,KAA6B;AAClC,MAAA,IAAI,CAAC,KAAA,EAAO;AAEZ,MAAA,MAAA,CAAO,KAAK,CAAA;AACZ,MAAA,cAAA,CAAe,MAAM,WAAW,CAAA;AAAA,IAClC;AAAA,GACF;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,UAAU,OAAA,EAAS;AACtB,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,gBAAgB,SAAA,CAAU,OAAA;AAEhC,IAAA,MAAM,QAAA,GAAW,IAAI,cAAA,CAAe,uBAAuB,CAAA;AAE3D,IAAA,QAAA,CAAS,QAAQ,aAAa,CAAA;AAE9B,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,UAAU,aAAa,CAAA;AAAA,IAClC,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,uBAAuB,CAAC,CAAA;AAE5B,EAAA,OAAO,EAAE,GAAA,EAAK,SAAA,EAAW,WAAA,EAAY;AACvC;;;;"}