@modern-kit/react
Version:
1 lines • 2.32 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../src/hooks/useBeforeUnload/index.ts"],"sourcesContent":["import { isFunction } from '@modern-kit/utils';\nimport { useEffect } from 'react';\n\n/**\n * @description beforeunload를 이벤트를 리액트에서 쉽게 다룰 수 있는 훅입니다.\n *\n * beforeunload 이벤트는 사용자가 페이지를 떠날 때 발생하는 이벤트입니다.\n *\n * beforeunload 이벤트의 주요 사례는 웹 페이지에서 사용자에게 실제로 페이지를 떠날 것인지 묻는 확인 대화 상자를 표시해 확인하는 것입니다.\n * 사용자가 확인 버튼을 누를 경우 브라우저는 새 페이지로 이동하고 그렇지 않으면 탐색을 취소하고 현재 페이지에 머무릅니다.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event\n *\n * @param {boolean | (() => boolean)} [enabled=true] - 훅의 활성화 여부를 결정합니다. false일 경우 이벤트 리스너가 등록되지 않습니다.\n * @returns {void}\n *\n * @example\n * // 기본 사용법\n * useBeforeUnload();\n *\n * @example\n * // enabled가 false일 때 beforeunload 이벤트 리스너가 추가되지 않습니다.\n * useBeforeUnload(false);\n */\nexport function useBeforeUnload(\n enabled: boolean | (() => boolean) = true\n): void {\n const enabledToUse = isFunction(enabled) ? enabled() : enabled;\n\n useEffect(() => {\n if (!enabledToUse) return;\n\n const handleBeforeUnload = (event: BeforeUnloadEvent) => {\n event.preventDefault();\n return (event.returnValue = '');\n };\n\n window.addEventListener('beforeunload', handleBeforeUnload);\n\n return () => {\n window.removeEventListener('beforeunload', handleBeforeUnload);\n };\n }, [enabledToUse]);\n}\n"],"names":[],"mappings":";;;AAwBO,SAAS,eAAA,CACd,UAAqC,IAAA,EAC/B;AACN,EAAA,MAAM,YAAA,GAAe,UAAA,CAAW,OAAO,CAAA,GAAI,SAAQ,GAAI,OAAA;AAEvD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,YAAA,EAAc;AAEnB,IAAA,MAAM,kBAAA,GAAqB,CAAC,KAAA,KAA6B;AACvD,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,OAAQ,MAAM,WAAA,GAAc,EAAA;AAAA,IAC9B,CAAA;AAEA,IAAA,MAAA,CAAO,gBAAA,CAAiB,gBAAgB,kBAAkB,CAAA;AAE1D,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,CAAO,mBAAA,CAAoB,gBAAgB,kBAAkB,CAAA;AAAA,IAC/D,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AACnB;;;;"}