just testing force touch in a next.js project. Not very useful as I can not make the touchpad vibrate which was my main purpose but still cool to be able to monitor the pressure precisely(only from safari))

force-touch.tsx

"use client";
import React, { useRef, useEffect } from "react";

// Define the extended MouseEvent interface to include the webkitForce property
interface ForceMouseEvent extends MouseEvent {
  webkitForce?: number;
}

export default function ForceTouchComponent() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    // Define the event handler functions with the correct type
    const handleEvent = (event: ForceMouseEvent) => {
      console.log(event.type, event.webkitForce);
    };

    // Use a generic approach to add event listeners
    const addForceEventListener = (
      type: string,
      listener: (this: HTMLDivElement, ev: ForceMouseEvent) => any,
    ) => {
      element.addEventListener(type, listener as EventListener);
    };

    // Add event listeners for Force Touch events
    addForceEventListener("webkitmouseforcewillbegin", handleEvent);
    addForceEventListener("webkitmouseforcedown", handleEvent);
    addForceEventListener("webkitmouseforceup", handleEvent);
    addForceEventListener("webkitmouseforcechanged", handleEvent);

    // Cleanup function to remove event listeners
    return () => {
      element.removeEventListener(
        "webkitmouseforcewillbegin",
        handleEvent as EventListener,
      );
      element.removeEventListener(
        "webkitmouseforcedown",
        handleEvent as EventListener,
      );
      element.removeEventListener(
        "webkitmouseforceup",
        handleEvent as EventListener,
      );
      element.removeEventListener(
        "webkitmouseforcechanged",
        handleEvent as EventListener,
      );
    };
  }, []);

  return (
    <div
      ref={ref}
      style={{ width: "100%", height: "100vh", background: "#eee" }}
    >
      Force Touch Area
    </div>
  );
}