#usePointerEvent
A Hook unifies TouchEvent and MouseEvent into PointerEvent, to help with handling pointer events in a cross-platform manner.
#Usage
import { usePointerEvent, CustomPointerEvent, CustomPointerEventMT } from "@lynx-js/react-use";
function App() {
const pointerHandlers = usePointerEvent({
onPointerDown: (event: CustomPointerEvent) => {
console.log("Pointer down", event);
},
onPointerDownMT: (event: CustomPointerEventMT) => {
'main thread'
console.log("Pointer down on main thread", event);
},
});
return <view {...pointerHandlers}></view>
}
#Type Declarations
type PointerAction = 'pointerdown' | 'pointermove' | 'pointerup';
interface CustomPointerEvent {
type: PointerAction;
pointerType: 'mouse' | 'touch';
x: number;
y: number;
pointerId: number;
isPrimary: boolean;
pageX?: number;
pageY?: number;
clientX?: number;
clientY?: number;
button?: number;
buttons?: number;
identifier?: number;
originalEvent: unknown;
}
interface CustomPointerEventMT extends CustomPointerEvent {
target: MainThread.Element;
currentTarget: MainThread.Element;
originalEvent: MainThread.MouseEvent | MainThread.TouchEvent;
}
function usePointerEvent({ onPointerDown, onPointerUp, onPointerMove, onPointerUpMT, onPointerMoveMT, onPointerDownMT, }: {
onPointerDown?: (event: CustomPointerEvent) => void;
onPointerUp?: (event: CustomPointerEvent) => void;
onPointerMove?: (event: CustomPointerEvent) => void;
onPointerUpMT?: (event: CustomPointerEventMT) => void;
onPointerMoveMT?: (event: CustomPointerEventMT) => void;
onPointerDownMT?: (event: CustomPointerEventMT) => void;
}): {
'bindmousedown'?: (e: MouseEvent) => void;
'bindtouchstart'?: (e: TouchEvent) => void;
'bindmousemove'?: (e: MouseEvent) => void;
'bindtouchmove'?: (e: TouchEvent) => void;
'bindmouseup'?: (e: MouseEvent) => void;
'bindtouchend'?: (e: TouchEvent) => void;
'main-thread:bindmousedown'?: (e: MainThread.MouseEvent) => void;
'main-thread:bindtouchstart'?: (e: MainThread.TouchEvent) => void;
'main-thread:bindmousemove'?: (e: MainThread.MouseEvent) => void;
'main-thread:bindtouchmove'?: (e: MainThread.TouchEvent) => void;
'main-thread:bindmouseup'?: (e: MainThread.MouseEvent) => void;
'main-thread:bindtouchend'?: (e: MainThread.TouchEvent) => void;
};