@modern-kit/react
Version:
1 lines • 2.27 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../src/hooks/useImageStatus/index.ts"],"sourcesContent":["import React, { useCallback, useState } from 'react';\n\ninterface UseImageStatusReturnType {\n ref: React.RefCallback<HTMLImageElement>;\n imageStatus: 'pending' | 'loading' | 'complete' | 'error';\n}\n\n/**\n * @description 이미지 로드 상태를 추적하는 커스텀 훅입니다.\n *\n * `pending`, `loading`, `complete`, `error` 네 가지 상태를 반환합니다.\n * - pending: 아직 이미지 로드가 시작되지 않은 상태.\n * - loading: 이미지가 로드 중인 상태.\n * - complete: 이미지가 성공적으로 로드된 상태.\n * - error: 이미지 로드 중 에러가 발생한 상태.\n *\n * @returns {UseImageStatusReturnType} 이미지의 현재 상태와 이미지 요소에 대한 ref 콜백을 반환합니다.\n * - `ref`: 이미지 요소에 연결할 ref 콜백\n * - `imageStatus`: 이미지의 현재 로드 상태 ('pending', 'loading', 'complete', 'error')\n *\n * @example\n * const { ref, imageStatus } = useImageStatus();\n *\n * return (\n * <div>\n * <img ref={ref} src=\"https://example.com/image.jpg\" alt=\"Example\" />\n * <p>이미지 상태: {imageStatus}</p>\n * </div>\n * );\n */\nexport function useImageStatus(): UseImageStatusReturnType {\n const [imageStatus, setImageStatus] = useState<\n 'pending' | 'loading' | 'complete' | 'error'\n >('pending');\n\n const ref = useCallback((imgElement: HTMLImageElement) => {\n if (!imgElement) {\n return;\n }\n\n setImageStatus('loading');\n\n imgElement.onload = () => {\n setImageStatus('complete');\n };\n\n imgElement.onerror = () => {\n setImageStatus('error');\n };\n }, []);\n\n return { ref, imageStatus };\n}\n"],"names":[],"mappings":";;AA8BO,SAAS,cAAA,GAA2C;AACzD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAEpC,SAAS,CAAA;AAEX,EAAA,MAAM,GAAA,GAAM,WAAA,CAAY,CAAC,UAAA,KAAiC;AACxD,IAAA,IAAI,CAAC,UAAA,EAAY;AACf,MAAA;AAAA,IACF;AAEA,IAAA,cAAA,CAAe,SAAS,CAAA;AAExB,IAAA,UAAA,CAAW,SAAS,MAAM;AACxB,MAAA,cAAA,CAAe,UAAU,CAAA;AAAA,IAC3B,CAAA;AAEA,IAAA,UAAA,CAAW,UAAU,MAAM;AACzB,MAAA,cAAA,CAAe,OAAO,CAAA;AAAA,IACxB,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,EAAE,KAAK,WAAA,EAAY;AAC5B;;;;"}