Repository navigation
Replace mousedown/touchstart/touchend with pointerdown/pointerup #878
Description
Is your feature request related to a problem? Please describe.
With the more modern events pointerdown/pointerup you can make use of pointer capture, which makes the whole drag UX better. For example you have better control over the cursor (it will not blink).
Describe the solution you'd like
Replace mousedown/touchstart/touchend with pointerdown/pointerup. But this will also not support as many browsers as the current solution. An alternative would be, to add those events on top. Just call this hook on top for example:
Describe alternatives you've considered
const useResizerEffects = (ref: RefObject<HTMLDivElement>) => {
useEffect(() => {
const element = ref.current;
if (!element) {
return;
}
const pointerIds = new Set<number>();
const handlePointerDown = (e: PointerEvent) => {
element.setPointerCapture(e.pointerId);
pointerIds.add(e.pointerId);
};
const handlePointerUp = (e: PointerEvent) => {
if (element.hasPointerCapture(e.pointerId)) {
element.releasePointerCapture(e.pointerId);
}
pointerIds.delete(e.pointerId);
};
element.addEventListener('pointerdown', handlePointerDown);
element.addEventListener('pointerup', handlePointerUp);
element.addEventListener('pointercancel', handlePointerUp);
return () => {
element.removeEventListener('pointerdown', handlePointerDown);
element.removeEventListener('pointerup', handlePointerUp);
element.removeEventListener('pointercancel', handlePointerUp);
pointerIds.forEach((pointerId) => {
if (element.hasPointerCapture(pointerId)) {
element.releasePointerCapture(pointerId);
}
});
};
}, [ref]);
};
Activity
tomkp commentedon Feb 18, 2026
Thanks for the feature request! I've reviewed this and agree it's a worthwhile improvement.
Analysis
Current State
The
useResizerhook currently handles mouse and touch events separately with:handleMouseDown/handleMouseUp/handleMouseMovefor mousehandleTouchStart/handleTouchEnd/handleTouchMovefor touchPros of Pointer Events
setPointerCapture()prevents cursor blinking during drag since the element captures all pointer eventsCons / Considerations
onPointerDowninstead ofonMouseDown/onTouchStartDecision
Going with full replacement rather than the additive approach because:
feat: replace mouse/touch events with pointer events
tomkp commentedon Feb 18, 2026
@delijah This has been implemented and released in v3.1.0 🎉
The library now uses the Pointer Events API with
setPointerCapture()for better drag UX - no more cursor blinking!What's included:
Backwards compatible: If you have custom dividers using
onMouseDown/onTouchStart/onTouchEnd, they'll continue to work. Those props now delegate toonPointerDowninternally (marked as deprecated).Thanks for the suggestion - let me know if it works for you!
feat: replace mouse/touch events with pointer events (tomkp#879)
delijah commentedon Feb 19, 2026
Wow, amazing. Thank you a lot ! 🙏
delijah commentedon Feb 19, 2026
@tomkp by the way: For
sourceyou could also useevent.pointerTypeif you need more accurate info what the pointer action initiated.feat: expose pointerType in ResizeEvent (#880)
tomkp commentedon Feb 19, 2026
@delijah Good suggestion! Implemented in #880 -
pointerTypeis now available in theResizeEvent:Will be in the next release.
tomkp commentedon Feb 19, 2026
@delijah v3.2.0 has been published to npm with the
pointerTypefeature. 🎉Thanks Tom