useTouchPrimary

1"use client";
2 
3// Adapted from Lina by SameerJS6 (https://lina.sameer.sh) — use-has-primary-touch.
4// Detects touch-primary devices (coarse pointer + touch points), updating live
5// on pointer-mode and media-query changes. Returns false on the server and the
6// first client render, so the non-touch branch is the hydration-stable default.
7 
8import { useEffect, useState } from "react";
9 
10export function useTouchPrimary() {
11  const [isTouchPrimary, setIsTouchPrimary] = useState(false);
12 
13  useEffect(() => {
14    if (typeof window === "undefined") return;
15 
16    const controller = new AbortController();
17    const { signal } = controller;
18 
19    const handleTouch = () => {
20      const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
21      const prefersTouch = window.matchMedia("(pointer: coarse)").matches;
22      setIsTouchPrimary(hasTouch && prefersTouch);
23    };
24 
25    const mq = window.matchMedia("(pointer: coarse)");
26    mq.addEventListener("change", handleTouch, { signal });
27    window.addEventListener("pointerdown", handleTouch, { signal });
28 
29    handleTouch();
30 
31    return () => controller.abort();
32  }, []);
33 
34  return isTouchPrimary;
35}