@modern-kit/react
Version:
1 lines • 3.23 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../../../src/hooks/useHover/index.ts"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { noop } from '@modern-kit/utils';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePreservedCallback } from '../../hooks/usePreservedCallback';\n\ninterface UseHoverProps {\n onEnter?: (event: MouseEvent) => void;\n onLeave?: (event: MouseEvent) => void;\n}\n\ninterface UseHoverReturnType<T extends HTMLElement> {\n ref: React.RefObject<T>;\n isHovered: boolean;\n}\n\n/**\n * @description 대상 컴포넌트를 기준으로 마우스가 올라가거나 내려갔을 때의 상태를 반환하고, 마우스가 올라가거나 내려갔을 때의 액션을 정의할 수 있는 커스텀 훅입니다.\n *\n * @template T - HTML 엘리먼트 타입을 지정합니다.\n * @param {{\n * onEnter?: (event: MouseEvent) => void;\n * onLeave?: (event: MouseEvent) => void;\n * }} props - 콜백 함수를 포함한 선택적 속성입니다.\n * - `onEnter`: 요소에 마우스가 진입할 때 호출되는 함수입니다. 기본값은 `noop` 함수입니다.\n * - `onLeave`: 요소에서 마우스가 떠날 때 호출되는 함수입니다. 기본값은 `noop` 함수입니다.\n *\n * @returns {UseHoverReturnType<T>} `ref`와 `isHovered`를 포함한 객체를 반환합니다.\n * - `ref`: 추적할 대상 요소의 참조입니다.\n * - `isHovered`: 요소가 호버 상태인지 여부를 나타내는 불리언 값입니다.\n *\n * @example\n * const { ref, isHovered } = useHover<HTMLDivElement>({\n * onEnter: () => console.log('마우스 진입'),\n * onLeave: () => console.log('마우스 퇴장'),\n * });\n *\n * return <div ref={ref}> {isHovered ? 'Hovered' : 'Not Hovered'} </div>;\n */\nexport function useHover<T extends HTMLElement>({\n onEnter = noop,\n onLeave = noop,\n}: UseHoverProps = {}): UseHoverReturnType<T> {\n const [isHovered, setIsHovered] = useState(false);\n\n const targetRef = useRef<T>(null);\n\n const preservedEnterAction = usePreservedCallback((event: MouseEvent) => {\n setIsHovered(true);\n onEnter(event);\n });\n\n const preservedLeaveAction = usePreservedCallback((event: MouseEvent) => {\n setIsHovered(false);\n onLeave(event);\n });\n\n useEventListener(targetRef, 'mouseenter', preservedEnterAction);\n useEventListener(targetRef, 'mouseleave', preservedLeaveAction);\n\n return { ref: targetRef, isHovered };\n}\n"],"names":["noop","useState","useRef","usePreservedCallback","useEventListener"],"mappings":";;;;;;;;AAsCO,SAAS,QAAA,CAAgC;AAAA,EAC9C,OAAA,GAAUA,UAAA;AAAA,EACV,OAAA,GAAUA;AACZ,CAAA,GAAmB,EAAC,EAA0B;AAC5C,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAAS,KAAK,CAAA;AAEhD,EAAA,MAAM,SAAA,GAAYC,aAAU,IAAI,CAAA;AAEhC,EAAA,MAAM,oBAAA,GAAuBC,8CAAA,CAAqB,CAAC,KAAA,KAAsB;AACvE,IAAA,YAAA,CAAa,IAAI,CAAA;AACjB,IAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,EACf,CAAC,CAAA;AAED,EAAA,MAAM,oBAAA,GAAuBA,8CAAA,CAAqB,CAAC,KAAA,KAAsB;AACvE,IAAA,YAAA,CAAa,KAAK,CAAA;AAClB,IAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,EACf,CAAC,CAAA;AAED,EAAAC,sCAAA,CAAiB,SAAA,EAAW,cAAc,oBAAoB,CAAA;AAC9D,EAAAA,sCAAA,CAAiB,SAAA,EAAW,cAAc,oBAAoB,CAAA;AAE9D,EAAA,OAAO,EAAE,GAAA,EAAK,SAAA,EAAW,SAAA,EAAU;AACrC;;;;"}