@mantine/hooks
Version:
A collection of 50+ hooks for state and UI management
1 lines • 2.03 kB
Source Map (JSON)
{"version":3,"file":"use-hover.cjs","names":[],"sources":["../../src/use-hover/use-hover.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nexport interface UseHoverReturnValue<T extends HTMLElement = any> {\n hovered: boolean;\n ref: React.RefCallback<T | null>;\n}\n\nexport function useHover<T extends HTMLElement = any>(): UseHoverReturnValue<T> {\n const [hovered, setHovered] = useState(false);\n const previousNode = useRef<HTMLElement>(null);\n\n const handleMouseEnter = useCallback(() => {\n setHovered(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setHovered(false);\n }, []);\n\n const ref: React.RefCallback<T | null> = useCallback(\n (node) => {\n if (previousNode.current) {\n previousNode.current.removeEventListener('mouseenter', handleMouseEnter);\n previousNode.current.removeEventListener('mouseleave', handleMouseLeave);\n }\n\n if (node) {\n node.addEventListener('mouseenter', handleMouseEnter);\n node.addEventListener('mouseleave', handleMouseLeave);\n }\n\n previousNode.current = node;\n\n return () => {\n previousNode.current = null;\n setHovered(false);\n };\n },\n [handleMouseEnter, handleMouseLeave]\n );\n\n return { ref, hovered };\n}\n\nexport namespace useHover {\n export type ReturnValue<T extends HTMLElement> = UseHoverReturnValue<T>;\n}\n"],"mappings":";;;AAOA,SAAgB,WAAgE;CAC9E,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,KAAK;CAC5C,MAAM,gBAAA,GAAA,MAAA,QAAmC,IAAI;CAE7C,MAAM,oBAAA,GAAA,MAAA,mBAAqC;EACzC,WAAW,IAAI;CACjB,GAAG,CAAC,CAAC;CAEL,MAAM,oBAAA,GAAA,MAAA,mBAAqC;EACzC,WAAW,KAAK;CAClB,GAAG,CAAC,CAAC;CAwBL,OAAO;EAAE,MAAA,GAAA,MAAA,cArBN,SAAS;GACR,IAAI,aAAa,SAAS;IACxB,aAAa,QAAQ,oBAAoB,cAAc,gBAAgB;IACvE,aAAa,QAAQ,oBAAoB,cAAc,gBAAgB;GACzE;GAEA,IAAI,MAAM;IACR,KAAK,iBAAiB,cAAc,gBAAgB;IACpD,KAAK,iBAAiB,cAAc,gBAAgB;GACtD;GAEA,aAAa,UAAU;GAEvB,aAAa;IACX,aAAa,UAAU;IACvB,WAAW,KAAK;GAClB;EACF,GACA,CAAC,kBAAkB,gBAAgB,CAG1B;EAAG;CAAQ;AACxB"}