@tpguy825/clicker - npm Package Compare versions

Comparing version 1.0.6 to 1.1.0

dist/index.d.ts

@@ -14,3 +14,3 @@ import { type MouseEvent, type TouchEvent } from "react";
  */
-export declare function useLongPress<Element extends HTMLElement>(onLongPress: (e: MouseEvent<Element> | TouchEvent<Element>) => void, onClick: (e: MouseEvent<Element> | TouchEvent<Element>) => void, options?: {
+export declare function useLongPress<Element extends HTMLElement>(onLongPress: (e: MouseEvent<Element> | TouchEvent<Element>) => void, onClick?: (e: MouseEvent<Element> | TouchEvent<Element>) => void, options?: {
     shouldPreventDefault?: boolean;
@@ -17,0 +17,0 @@ delay?: number;

dist/index.js

@@ -1,5 +0,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLongHover = exports.useLongPress = void 0;
-var react_1 = require("react");
+import { useCallback, useRef, useState } from "react";
 /**
@@ -10,8 +7,8 @@ * @template Element Used to specify what type of element the event listeners will be attached to.
  */
-function useLongPress(onLongPress, onClick, options) {
-    var _a = options || {}, _b = _a.shouldPreventDefault, shouldPreventDefault = _b === void 0 ? true : _b, _c = _a.delay, delay = _c === void 0 ? 300 : _c;
-    var _d = (0, react_1.useState)(false), longPressTriggered = _d[0], setLongPressTriggered = _d[1];
-    var timeout = (0, react_1.useRef)();
-    var target = (0, react_1.useRef)();
-    var start = (0, react_1.useCallback)(function (event) {
+export function useLongPress(onLongPress, onClick, options) {
+    const { shouldPreventDefault = true, delay = 300 } = options || {};
+    const [longPressTriggered, setLongPressTriggered] = useState(false);
+    const timeout = useRef();
+    const target = useRef();
+    const start = useCallback((event) => {
         if (shouldPreventDefault && event.target) {
@@ -23,3 +20,3 @@ event.target.addEventListener("touchend", preventDefault, {
         }
-        timeout.current = setTimeout(function () {
+        timeout.current = setTimeout(() => {
             onLongPress(event);
@@ -29,7 +26,6 @@ setLongPressTriggered(true);
     }, [onLongPress, delay, shouldPreventDefault]);
-    var clear = (0, react_1.useCallback)(function (event, shouldTriggerClick) {
-        if (shouldTriggerClick === void 0) { shouldTriggerClick = true; }
+    const clear = useCallback((event, shouldTriggerClick = true) => {
         if (timeout.current)
             clearTimeout(timeout.current);
-        if (shouldTriggerClick && !longPressTriggered)
+        if (shouldTriggerClick && !longPressTriggered && onClick)
             onClick(event);
@@ -41,3 +37,3 @@ setLongPressTriggered(false);
     }, [shouldPreventDefault, onClick, longPressTriggered]);
-    var preventDefault = function (event) {
+    const preventDefault = (event) => {
         if (!("touches" in event) || event.touches === undefined)
@@ -53,15 +49,14 @@ return;
         onMouseUp: clear,
-        onMouseLeave: function (event) { return clear(event, false); },
+        onMouseLeave: (event) => clear(event, false),
         onTouchEnd: clear,
     };
 }
-exports.useLongPress = useLongPress;
 /**
  * @param {number} time The time in milliseconds that the user must hover for.
  */
-function useLongHover(time) {
-    var _a = (0, react_1.useState)(false), isHoveredForTime = _a[0], setIsHoveredForTime = _a[1];
-    var _b = (0, react_1.useState)(null), timeout = _b[0], changeTimeout = _b[1];
-    var handlers = {
-        onMouseLeave: function () {
+export function useLongHover(time) {
+    const [isHoveredForTime, setIsHoveredForTime] = useState(false);
+    const [timeout, changeTimeout] = useState(null);
+    const handlers = {
+        onMouseLeave: () => {
             if (timeout) {
@@ -73,7 +68,6 @@ clearTimeout(timeout);
         },
-        onMouseEnter: function () { return changeTimeout(setTimeout(function () { return setIsHoveredForTime(true); }, time)); },
+        onMouseEnter: () => changeTimeout(setTimeout(() => setIsHoveredForTime(true), time)),
     };
     return [isHoveredForTime, handlers];
 }
-exports.useLongHover = useLongHover;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@tpguy825/clicker",
-  "version": "1.0.6",
-  "private": false,
+  "version": "1.1.0",
   "description": "Mouse event helper library for React",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./preact": {
+      "import": "./dist/preact/index.js",
+      "require": "./dist/preact/index.js"
+    },
+    "./dist/index.js": "./dist/index.js",
+    "./dist/index.d.ts": "./dist/index.d.ts",
+    "./dist/preact/index.js": "./dist/preact/index.js",
+    "./dist/preact/index.d.ts": "./dist/preact/index.d.ts"
+  },
   "repository": {
     "type": "git",
-    "url": "git+ssh://[e-mail]/tpguy825/clicker.git"
+    "url": "https://github.com/tpguy825/clicker.git"
   },
@@ -16,10 +30,11 @@ "author": "tpguy825",
   },
-  "packageManager": "yarn@3.6.0",
+  "packageManager": "pnpm@8.7.0",
   "homepage": "https://github.com/tpguy825/clicker#readme",
   "devDependencies": {
-    "@types/node": "^20.4.5",
-    "@types/react": "^18.2.17",
-    "typescript": "^5.1.6"
+    "@types/node": "^20.5.6",
+    "@types/react": "^18.2.21",
+    "typescript": "^5.2.2"
   },
   "dependencies": {
+    "preact": "^10.17.1",
     "react": "^18.2.0"
@@ -33,3 +48,6 @@ },
     "hook"
-  ]
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  }
 }

README.md

 # clicker
 
 Mouse event helper library for React
+
+## Examples
+
+```jsx
+import { useLongPress, useLongHover } from "@tpguy825/clicker";
+// or for preact
+import { useLongPress, useLongHover } from "@tpguy825/clicker/preact";
+
+function App() {
+    const handlers = useLongPress(
+        () => console.log("long press"),
+        () => console.log("short press (click)"),
+        { shouldPreventDefault: false, interval: 100 /* 0.1s */ },
+    );
+
+    return <button {...handlers}>Click me (then check the console)</button>;
+}
+
+function App() {
+    const [hoveredForTime, handlers] = useLongHover(500);
+
+    return <button {...handlers}>{hoveredForTime ? "You hovered for 0.5s!" : "Hover over me!"}</button>;
+}
+```

Fixed alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16963

increased by89.07%

Number of package files

12

increased by71.43%

Lines of code

200

increased by100%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

28

increased by600%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addedpreact@^10.17.1

• + Addedpreact@10.22.0(transitive)