usePress.tsx

import React from "react";

function usePress(onEnd: (isCancelled: boolean) => void, onStart?: () => void) {
  return {
    onPointerUp(e: React.PointerEvent<Element>) {
      const rect = e.currentTarget.getBoundingClientRect();

      onEnd(
        !(
          e.clientX >= rect.left &&
          e.clientX <= rect.right &&
          e.clientY >= rect.top &&
          e.clientY <= rect.bottom
        )
      );
    },

    onPointerDown: onStart,
  };
}

function Usage() {
  const press = usePress(
    (isCancelled) => console.log(isCancelled ? "press cancelled" : "press end"),
    () => console.log("press start")
  );

  return <button {...press} />;
}