@modern-kit/react
Version:
1 lines • 2.77 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../src/components/LazyImage/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useIntersectionObserver } from '../../hooks/useIntersectionObserver';\nimport { useMergeRefs } from '../../hooks/useMergeRefs';\n\nexport interface LazyImageProps\n extends React.ComponentProps<'img'>,\n IntersectionObserverInit {\n src: string;\n}\n\n/**\n * @description 이미지가 viewport에 노출 될 때 할당된 이미지를 `Lazy Loading(지연 로딩)` 하는 이미지 컴포넌트입니다.\n *\n * `@modern-kit/react`의 `useIntersectionObserver` 훅을 사용하여 구현되었습니다.\n *\n * @see https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useIntersectionObserver\n *\n * @param {LazyImageProps} props - img 태그의 모든 속성 및 IntersectionObserverInit 속성을 지원합니다.\n * @param {Element} [params.root=null] - 교차할 때 기준이 되는 root 요소입니다. 기본값은 `null`이며 이는 viewport를 의미합니다.\n * @param {number | number[]} [params.threshold=0] - Observer가 콜백을 호출하는 임계값을 나타냅니다.\n * @param {string} [params.rootMargin='100px 0px'] - 루트 요소에 대한 마진을 지정합니다. 이는 뷰포트 또는 루트 요소의 경계를 확장하거나 축소하는데 사용됩니다.\n *\n * @returns {JSX.Element} 지연 로딩을 지원하는 이미지 컴포넌트를 반환합니다.\n *\n * @example\n * ```tsx\n * <LazyImage\n * src=\"imageUrl\"\n * alt=\"Lazy loaded image\"\n * rootMargin=\"100px 0px\"\n * />\n * ```\n */\nexport const LazyImage = forwardRef<HTMLImageElement, LazyImageProps>(\n ({ src, threshold, root, rootMargin, ...restProps }, ref): JSX.Element => {\n const { ref: imgRef } = useIntersectionObserver<HTMLImageElement>({\n onIntersectStart: (entry) => {\n const targetImgElement = entry.target as HTMLImageElement;\n targetImgElement.src = src;\n },\n calledOnce: true,\n threshold,\n root,\n rootMargin,\n });\n\n return <img ref={useMergeRefs(ref, imgRef)} {...restProps} />;\n }\n);\n\nLazyImage.displayName = 'LazyImage';\n"],"names":[],"mappings":";;;;;;;;AAiCO,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,CAAC,EAAE,GAAA,EAAK,SAAA,EAAW,MAAM,UAAA,EAAY,GAAG,SAAA,EAAU,EAAG,GAAA,KAAqB;AACxE,IAAA,MAAM,EAAE,GAAA,EAAK,MAAA,EAAO,GAAI,uBAAA,CAA0C;AAAA,MAChE,gBAAA,EAAkB,CAAC,KAAA,KAAU;AAC3B,QAAA,MAAM,mBAAmB,KAAA,CAAM,MAAA;AAC/B,QAAA,gBAAA,CAAiB,GAAA,GAAM,GAAA;AAAA,MACzB,CAAA;AAAA,MACA,UAAA,EAAY,IAAA;AAAA,MACZ,SAAA;AAAA,MACA,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,uBAAO,GAAA,CAAC,SAAI,GAAA,EAAK,YAAA,CAAa,KAAK,MAAM,CAAA,EAAI,GAAG,SAAA,EAAW,CAAA;AAAA,EAC7D;AACF;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;;;;"}