react-use-pointer-drag - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/index.d.ts

@@ -20,2 +20,14 @@ /// <reference types="react" />
 }
+export interface IPointerDragOptions {
+    /**
+     * If set to true, stopPropagation will be called.
+     * Default: true.
+     */
+    stopPropagation?: boolean;
+    /**
+     * If set to true, preventDefault will be called.
+     * Default: true.
+     */
+    preventDefault?: boolean;
+}
 /**
@@ -26,3 +38,3 @@ * Common mouse/touch hold and move actions.
  */
-export declare function usePointerDrag<T>(updatePosition: (x: number, y: number, dragState: T) => void): IPointerDragState<T>;
+export declare function usePointerDrag<T>(updatePosition: (x: number, y: number, dragState: T) => void, options?: IPointerDragOptions): IPointerDragState<T>;
 export interface IPointerDragSimpleState {
@@ -44,2 +56,2 @@ /**
  */
-export declare function usePointerDragSimple(updatePosition: (x: number, y: number) => void): IPointerDragSimpleState;
+export declare function usePointerDragSimple(updatePosition: (x: number, y: number) => void, options?: IPointerDragOptions): IPointerDragSimpleState;

dist/react-use-pointer-drag.cjs.development.js

@@ -13,3 +13,7 @@ 'use strict';
 
-function usePointerDrag(updatePosition) {
+function usePointerDrag(updatePosition, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
   var _useState = react.useState(undefined),
@@ -19,2 +23,7 @@ dragState = _useState[0],
 
+  var _options = options,
+      _options$stopPropagat = _options.stopPropagation,
+      stopPropagation = _options$stopPropagat === void 0 ? true : _options$stopPropagat,
+      _options$preventDefau = _options.preventDefault,
+      preventDefault = _options$preventDefau === void 0 ? true : _options$preventDefau;
   react.useEffect(function () {
@@ -26,4 +35,4 @@ if (typeof dragState === 'undefined') {
     var handleMouseMove = function handleMouseMove(e) {
-      e.preventDefault();
-      e.stopPropagation();
+      if (preventDefault) e.preventDefault();
+      if (stopPropagation) e.stopPropagation();
       updatePosition(e.clientX, e.clientY, dragState);
@@ -33,4 +42,4 @@ };
     var handleTouchMove = function handleTouchMove(e) {
-      e.preventDefault();
-      e.stopPropagation();
+      if (preventDefault) e.preventDefault();
+      if (stopPropagation) e.stopPropagation();
       var touch = e.touches[0];
@@ -76,19 +85,30 @@
 
-function usePointerDragSimple(updatePosition) {
-  var _usePointerDrag = usePointerDrag(updatePosition),
+function usePointerDragSimple(updatePosition, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  var _usePointerDrag = usePointerDrag(updatePosition, options),
       startDragging = _usePointerDrag.startDragging,
       dragState = _usePointerDrag.dragState;
 
+  var _options2 = options,
+      _options2$stopPropaga = _options2.stopPropagation,
+      stopPropagation = _options2$stopPropaga === void 0 ? true : _options2$stopPropaga,
+      _options2$preventDefa = _options2.preventDefault,
+      preventDefault = _options2$preventDefa === void 0 ? true : _options2$preventDefa;
   var events = react.useMemo(function () {
     return {
       onMouseDown: function onMouseDown(e) {
-        e.preventDefault();
+        if (preventDefault) e.preventDefault();
+        if (stopPropagation) e.stopPropagation();
         startDragging(true);
       },
       onTouchStart: function onTouchStart(e) {
-        e.preventDefault();
+        if (preventDefault) e.preventDefault();
+        if (stopPropagation) e.stopPropagation();
         startDragging(true);
       }
     };
-  }, [startDragging]);
+  }, [startDragging, preventDefault, stopPropagation]);
   return {
@@ -95,0 +115,0 @@ events: events,

dist/react-use-pointer-drag.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(t){var n=e.useState(void 0),o=n[0],r=n[1];return e.useEffect((function(){if(void 0!==o){var e=function(e){e.preventDefault(),e.stopPropagation(),t(e.clientX,e.clientY,o)},n=function(e){e.preventDefault(),e.stopPropagation();var n=e.touches[0];n&&t(n.clientX,n.clientY,o)},u=function(){r(void 0)};return document.addEventListener("mousemove",e),document.addEventListener("mouseup",u),document.addEventListener("touchmove",n),document.addEventListener("touchend",u),document.addEventListener("touchcancel",u),function(){document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",u),document.removeEventListener("touchmove",n),document.removeEventListener("touchend",u),document.removeEventListener("touchcancel",u)}}})),{startDragging:e.useCallback((function(e){return r(e)}),[r]),dragState:o}}exports.usePointerDrag=t,exports.usePointerDragSimple=function(n){var o=t(n),r=o.startDragging,u=o.dragState;return{events:e.useMemo((function(){return{onMouseDown:function(e){e.preventDefault(),r(!0)},onTouchStart:function(e){e.preventDefault(),r(!0)}}}),[r]),moving:u||!1}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(t,n){void 0===n&&(n={});var o=e.useState(void 0),r=o[0],u=o[1],i=n.stopPropagation,a=void 0===i||i,c=n.preventDefault,v=void 0===c||c;return e.useEffect((function(){if(void 0!==r){var e=function(e){v&&e.preventDefault(),a&&e.stopPropagation(),t(e.clientX,e.clientY,r)},n=function(e){v&&e.preventDefault(),a&&e.stopPropagation();var n=e.touches[0];n&&t(n.clientX,n.clientY,r)},o=function(){u(void 0)};return document.addEventListener("mousemove",e),document.addEventListener("mouseup",o),document.addEventListener("touchmove",n),document.addEventListener("touchend",o),document.addEventListener("touchcancel",o),function(){document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",o),document.removeEventListener("touchmove",n),document.removeEventListener("touchend",o),document.removeEventListener("touchcancel",o)}}})),{startDragging:e.useCallback((function(e){return u(e)}),[u]),dragState:r}}exports.usePointerDrag=t,exports.usePointerDragSimple=function(n,o){void 0===o&&(o={});var r=t(n,o),u=r.startDragging,i=r.dragState,a=o.stopPropagation,c=void 0===a||a,v=o.preventDefault,s=void 0===v||v;return{events:e.useMemo((function(){return{onMouseDown:function(e){s&&e.preventDefault(),c&&e.stopPropagation(),u(!0)},onTouchStart:function(e){s&&e.preventDefault(),c&&e.stopPropagation(),u(!0)}}}),[u,s,c]),moving:i||!1}};
 //# sourceMappingURL=react-use-pointer-drag.cjs.production.min.js.map

dist/react-use-pointer-drag.esm.js

@@ -9,3 +9,7 @@ import { useState, useEffect, useCallback, useMemo } from 'react';
 
-function usePointerDrag(updatePosition) {
+function usePointerDrag(updatePosition, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
   var _useState = useState(undefined),
@@ -15,2 +19,7 @@ dragState = _useState[0],
 
+  var _options = options,
+      _options$stopPropagat = _options.stopPropagation,
+      stopPropagation = _options$stopPropagat === void 0 ? true : _options$stopPropagat,
+      _options$preventDefau = _options.preventDefault,
+      preventDefault = _options$preventDefau === void 0 ? true : _options$preventDefau;
   useEffect(function () {
@@ -22,4 +31,4 @@ if (typeof dragState === 'undefined') {
     var handleMouseMove = function handleMouseMove(e) {
-      e.preventDefault();
-      e.stopPropagation();
+      if (preventDefault) e.preventDefault();
+      if (stopPropagation) e.stopPropagation();
       updatePosition(e.clientX, e.clientY, dragState);
@@ -29,4 +38,4 @@ };
     var handleTouchMove = function handleTouchMove(e) {
-      e.preventDefault();
-      e.stopPropagation();
+      if (preventDefault) e.preventDefault();
+      if (stopPropagation) e.stopPropagation();
       var touch = e.touches[0];
@@ -72,19 +81,30 @@
 
-function usePointerDragSimple(updatePosition) {
-  var _usePointerDrag = usePointerDrag(updatePosition),
+function usePointerDragSimple(updatePosition, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  var _usePointerDrag = usePointerDrag(updatePosition, options),
       startDragging = _usePointerDrag.startDragging,
       dragState = _usePointerDrag.dragState;
 
+  var _options2 = options,
+      _options2$stopPropaga = _options2.stopPropagation,
+      stopPropagation = _options2$stopPropaga === void 0 ? true : _options2$stopPropaga,
+      _options2$preventDefa = _options2.preventDefault,
+      preventDefault = _options2$preventDefa === void 0 ? true : _options2$preventDefa;
   var events = useMemo(function () {
     return {
       onMouseDown: function onMouseDown(e) {
-        e.preventDefault();
+        if (preventDefault) e.preventDefault();
+        if (stopPropagation) e.stopPropagation();
         startDragging(true);
       },
       onTouchStart: function onTouchStart(e) {
-        e.preventDefault();
+        if (preventDefault) e.preventDefault();
+        if (stopPropagation) e.stopPropagation();
         startDragging(true);
       }
     };
-  }, [startDragging]);
+  }, [startDragging, preventDefault, stopPropagation]);
   return {
@@ -91,0 +111,0 @@ events: events,

package.json

 {
-  "version": "0.0.1",
+  "version": "0.0.2",
   "license": "BSD-3-Clause-Clear",
@@ -17,3 +17,3 @@ "main": "dist/index.js",
     "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
+    "lint": "tsdx lint src",
     "prepare": "tsdx build",
@@ -20,0 +20,0 @@ "size": "size-limit",

README.md

@@ -1,3 +0,13 @@
-# react-use-pointer-drag
+<h1 align="center">
+react-use-pointer-drag
+</h1>
 
+<p align="center">
+<img alt="workflow" src="https://img.shields.io/github/workflow/status/mat-sz/react-use-pointer-drag/CI">
+<a href="https://npmjs.com/package/react-use-pointer-drag">
+<img alt="npm" src="https://img.shields.io/npm/v/react-use-pointer-drag">
+<img alt="npm" src="https://img.shields.io/npm/dw/react-use-pointer-drag">
+<img alt="NPM" src="https://img.shields.io/npm/l/react-use-pointer-drag">
+</a>
+</p>
 A simple hook for handling drag and move actions in React apps.
@@ -4,0 +14,0 @@

src/index.ts

@@ -24,2 +24,16 @@ import { useState, useEffect, useCallback, useMemo } from 'react';
 
+export interface IPointerDragOptions {
+  /**
+   * If set to true, stopPropagation will be called.
+   * Default: true.
+   */
+  stopPropagation?: boolean;
+
+  /**
+   * If set to true, preventDefault will be called.
+   * Default: true.
+   */
+  preventDefault?: boolean;
+}
+
 /**
@@ -31,6 +45,9 @@ * Common mouse/touch hold and move actions.
 export function usePointerDrag<T>(
-  updatePosition: (x: number, y: number, dragState: T) => void
+  updatePosition: (x: number, y: number, dragState: T) => void,
+  options: IPointerDragOptions = {}
 ): IPointerDragState<T> {
   const [dragState, setDragState] = useState<T | undefined>(undefined);
 
+  const { stopPropagation = true, preventDefault = true } = options;
+
   useEffect(() => {
@@ -42,4 +59,4 @@ if (typeof dragState === 'undefined') {
     const handleMouseMove = (e: MouseEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
+      if (preventDefault) e.preventDefault();
+      if (stopPropagation) e.stopPropagation();
 
@@ -50,4 +67,4 @@ updatePosition(e.clientX, e.clientY, dragState);
     const handleTouchMove = (e: TouchEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
+      if (preventDefault) e.preventDefault();
+      if (stopPropagation) e.stopPropagation();
 
@@ -84,3 +101,3 @@ const touch = e.touches[0];
   const startDragging = useCallback((state: T) => setDragState(state), [
-    setDragState,
+    setDragState
   ]);
@@ -90,3 +107,3 @@
     startDragging,
-    dragState,
+    dragState
   };
@@ -114,18 +131,28 @@ }
 export function usePointerDragSimple(
-  updatePosition: (x: number, y: number) => void
+  updatePosition: (x: number, y: number) => void,
+  options: IPointerDragOptions = {}
 ): IPointerDragSimpleState {
-  const { startDragging, dragState } = usePointerDrag<boolean>(updatePosition);
+  const { startDragging, dragState } = usePointerDrag<boolean>(
+    updatePosition,
+    options
+  );
 
+  const { stopPropagation = true, preventDefault = true } = options;
+
   const events = useMemo(
     () => ({
       onMouseDown: (e: React.MouseEvent) => {
-        e.preventDefault();
+        if (preventDefault) e.preventDefault();
+        if (stopPropagation) e.stopPropagation();
+
         startDragging(true);
       },
       onTouchStart: (e: React.TouchEvent) => {
-        e.preventDefault();
+        if (preventDefault) e.preventDefault();
+        if (stopPropagation) e.stopPropagation();
+
         startDragging(true);
-      },
+      }
     }),
-    [startDragging]
+    [startDragging, preventDefault, stopPropagation]
   );
@@ -135,4 +162,4 @@
     events,
-    moving: dragState || false,
+    moving: dragState || false
   };
 }

No alert changes

Improved metrics

Total package byte prevSize

39594

23.2%

Lines of code

395

21.54%

Number of lines in readme file

58

20.83%

No dependency changes