Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
2.4 kB · 89 lines
TypeScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990import { useEffect, useState } from "react";import { Platform } from "react-native";
export interface PointerDevice { hasHover: boolean; hasFinePointer: boolean; isMouseDriven: boolean; isTouchDriven: boolean;}
/** * Hook to detect if the device is primarily mouse-driven vs touch-driven * Uses CSS media queries to detect hover and pointer capabilities */export function usePointerDevice(): PointerDevice { const [pointerDevice, setPointerDevice] = useState<PointerDevice>(() => { // Default values for non-web platforms if (Platform.OS !== "web") { return { hasHover: false, hasFinePointer: false, isMouseDriven: false, isTouchDriven: true, }; }
// Initial web detection if (typeof window !== "undefined" && window.matchMedia) { const hasHover = window.matchMedia("(hover: hover)").matches; const hasFinePointer = window.matchMedia("(pointer: fine)").matches;
return { hasHover, hasFinePointer, isMouseDriven: hasHover && hasFinePointer, isTouchDriven: !hasHover || !hasFinePointer, }; }
// Fallback for SSR or environments without matchMedia return { hasHover: false, hasFinePointer: false, isMouseDriven: false, isTouchDriven: true, }; });
useEffect(() => { // Only run on web platforms if ( Platform.OS !== "web" || typeof window === "undefined" || !window.matchMedia ) { return; }
const hoverQuery = window.matchMedia("(hover: hover)"); const pointerQuery = window.matchMedia("(pointer: fine)");
const updatePointerDevice = () => { const hasHover = hoverQuery.matches; const hasFinePointer = pointerQuery.matches;
setPointerDevice({ hasHover, hasFinePointer, isMouseDriven: hasHover && hasFinePointer, isTouchDriven: !hasHover || !hasFinePointer, }); };
// Set up listeners for media query changes hoverQuery.addEventListener("change", updatePointerDevice); pointerQuery.addEventListener("change", updatePointerDevice);
// Initial update updatePointerDevice();
// Cleanup return () => { hoverQuery.removeEventListener("change", updatePointerDevice); pointerQuery.removeEventListener("change", updatePointerDevice); }; }, []);
return pointerDevice;}