react-pointer-type - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

dist/index.d.ts

 export declare type PointerType = 'mouse' | 'pen' | 'touch';
+declare type PointerEventType = 'pointerover' | 'pointerenter' | 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel' | 'pointerout' | 'pointerleave' | 'gotpointercapture' | 'lostpointercapture';
 interface UsePointerTypeOptions {
     initial?: PointerType;
+    attachClass?: boolean;
+    classPrefix?: string;
+    updateOn?: PointerEventType;
 }
-export declare const usePointerType: ({ initial, }?: UsePointerTypeOptions) => PointerType;
-interface UseMatchPointerTypeOptions {
-    initial?: PointerType;
-}
-export declare const useMatchPointerType: (pointerTypes: PointerType[], { initial }?: UseMatchPointerTypeOptions) => boolean;
-interface UsePointerTypeClassNameOptions {
-    prefix?: string;
-    initial?: PointerType;
-}
-export declare const usePointerTypeClassName: ({ prefix, initial, }?: UsePointerTypeClassNameOptions) => void;
-interface UseMatchPointerTypeClassNameOptions {
-    match?: string;
-    noMatch?: string;
-    initial?: PointerType;
-}
-export declare const useMatchPointerTypeClassName: (pointerTypes: PointerType[], { match: matchClass, noMatch: noMatchClass, initial, }: UseMatchPointerTypeClassNameOptions) => void;
+export declare const usePointerType: ({ initial, attachClass, classPrefix, updateOn, }?: UsePointerTypeOptions) => PointerType;
 export {};

dist/react-pointer-type.modern.js

@@ -1,2 +0,2 @@
-import{useState as e,useEffect as t}from"react";const n=({initial:n="mouse"}={})=>{const[o,m]=e(n);return t(()=>{const e=e=>{m(e.pointerType)};return document.addEventListener("pointerdown",e),()=>{document.removeEventListener("pointerdown",e)}},[]),o},o=(e,{initial:t="mouse"}={})=>{const o=n({initial:t});return e.includes(o)},m=({prefix:e="",initial:o="mouse"}={})=>{const m=n({initial:o});t(()=>(document.documentElement.classList.add(e+m),()=>{document.documentElement.classList.remove(e+"mouse"),document.documentElement.classList.remove(e+"touch"),document.documentElement.classList.remove(e+"pen")}),[m,e])},s=(e,{match:n,noMatch:m,initial:s="mouse"})=>{const c=o(e,{initial:s});t(()=>(c&&n&&document.documentElement.classList.add(n),!c&&m&&document.documentElement.classList.add(m),()=>{n&&document.documentElement.classList.remove(n),m&&document.documentElement.classList.remove(m)}),[c,n,m])};export{o as useMatchPointerType,s as useMatchPointerTypeClassName,n as usePointerType,m as usePointerTypeClassName};
+import{useState as e,useEffect as t}from"react";const n=({initial:n="mouse",attachClass:o=!1,classPrefix:s="",updateOn:m="pointerdown"}={})=>{const[c,r]=e(n);return t(()=>{const e=e=>{r(e.pointerType)};return document.addEventListener(m,e),()=>{document.removeEventListener(m,e)}},[]),t(()=>{if(o)return document.documentElement.classList.add(s+c),()=>{document.documentElement.classList.remove(s+"mouse"),document.documentElement.classList.remove(s+"touch"),document.documentElement.classList.remove(s+"pen")}},[c,s,o]),c};export{n as usePointerType};
 //# sourceMappingURL=react-pointer-type.modern.js.map

dist/react-pointer-type.module.js

@@ -1,2 +0,2 @@
-import{useState as n,useEffect as e}from"react";var t=function(t){var o=(void 0===t?{}:t).initial,i=n(void 0===o?"mouse":o),c=i[0],u=i[1];return e(function(){var n=function(n){u(n.pointerType)};return document.addEventListener("pointerdown",n),function(){document.removeEventListener("pointerdown",n)}},[]),c},o=function(n,e){var o=(void 0===e?{}:e).initial,i=t({initial:void 0===o?"mouse":o});return n.includes(i)},i=function(n){var o=void 0===n?{}:n,i=o.prefix,c=void 0===i?"":i,u=o.initial,m=t({initial:void 0===u?"mouse":u});e(function(){return document.documentElement.classList.add(c+m),function(){document.documentElement.classList.remove(c+"mouse"),document.documentElement.classList.remove(c+"touch"),document.documentElement.classList.remove(c+"pen")}},[m,c])},c=function(n,t){var i=t.match,c=t.noMatch,u=t.initial,m=o(n,{initial:void 0===u?"mouse":u});e(function(){return m&&i&&document.documentElement.classList.add(i),!m&&c&&document.documentElement.classList.add(c),function(){i&&document.documentElement.classList.remove(i),c&&document.documentElement.classList.remove(c)}},[m,i,c])};export{o as useMatchPointerType,c as useMatchPointerTypeClassName,t as usePointerType,i as usePointerTypeClassName};
+import{useState as e,useEffect as t}from"react";var n=function(n){var o=void 0===n?{}:n,i=o.initial,c=o.attachClass,u=void 0!==c&&c,m=o.classPrefix,r=void 0===m?"":m,d=o.updateOn,s=void 0===d?"pointerdown":d,a=e(void 0===i?"mouse":i),v=a[0],l=a[1];return t(function(){var e=function(e){l(e.pointerType)};return document.addEventListener(s,e),function(){document.removeEventListener(s,e)}},[]),t(function(){if(u)return document.documentElement.classList.add(r+v),function(){document.documentElement.classList.remove(r+"mouse"),document.documentElement.classList.remove(r+"touch"),document.documentElement.classList.remove(r+"pen")}},[v,r,u]),v};export{n as usePointerType};
 //# sourceMappingURL=react-pointer-type.module.js.map

dist/react-pointer-type.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e||self).reactPointerType={},e.react)}(this,function(e,t){var n=function(e){var n=(void 0===e?{}:e).initial,o=t.useState(void 0===n?"mouse":n),i=o[0],u=o[1];return t.useEffect(function(){var e=function(e){u(e.pointerType)};return document.addEventListener("pointerdown",e),function(){document.removeEventListener("pointerdown",e)}},[]),i},o=function(e,t){var o=(void 0===t?{}:t).initial,i=n({initial:void 0===o?"mouse":o});return e.includes(i)};e.useMatchPointerType=o,e.useMatchPointerTypeClassName=function(e,n){var i=n.match,u=n.noMatch,c=n.initial,s=o(e,{initial:void 0===c?"mouse":c});t.useEffect(function(){return s&&i&&document.documentElement.classList.add(i),!s&&u&&document.documentElement.classList.add(u),function(){i&&document.documentElement.classList.remove(i),u&&document.documentElement.classList.remove(u)}},[s,i,u])},e.usePointerType=n,e.usePointerTypeClassName=function(e){var o=void 0===e?{}:e,i=o.prefix,u=void 0===i?"":i,c=o.initial,s=n({initial:void 0===c?"mouse":c});t.useEffect(function(){return document.documentElement.classList.add(u+s),function(){document.documentElement.classList.remove(u+"mouse"),document.documentElement.classList.remove(u+"touch"),document.documentElement.classList.remove(u+"pen")}},[s,u])}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e||self).reactPointerType={},e.react)}(this,function(e,t){e.usePointerType=function(e){var n=void 0===e?{}:e,o=n.initial,i=n.attachClass,u=void 0!==i&&i,c=n.classPrefix,s=void 0===c?"":c,d=n.updateOn,r=void 0===d?"pointerdown":d,f=t.useState(void 0===o?"mouse":o),a=f[0],m=f[1];return t.useEffect(function(){var e=function(e){m(e.pointerType)};return document.addEventListener(r,e),function(){document.removeEventListener(r,e)}},[]),t.useEffect(function(){if(u)return document.documentElement.classList.add(s+a),function(){document.documentElement.classList.remove(s+"mouse"),document.documentElement.classList.remove(s+"touch"),document.documentElement.classList.remove(s+"pen")}},[a,s,u]),a}});
 //# sourceMappingURL=react-pointer-type.umd.js.map

package.json

 {
-  "version": "0.1.1",
+  "version": "0.2.0",
   "license": "MIT",
@@ -4,0 +4,0 @@ "description": "React hooks for adapting to pointer type changes. The correct alternative to feature detection.",

src/index.ts

@@ -5,4 +5,19 @@ import { useEffect, useState } from 'react';
 
+type PointerEventType =
+  | 'pointerover'
+  | 'pointerenter'
+  | 'pointerdown'
+  | 'pointermove'
+  | 'pointerup'
+  | 'pointercancel'
+  | 'pointerout'
+  | 'pointerleave'
+  | 'gotpointercapture'
+  | 'lostpointercapture';
+
 interface UsePointerTypeOptions {
   initial?: PointerType;
+  attachClass?: boolean;
+  classPrefix?: string;
+  updateOn?: PointerEventType;
 }
@@ -12,2 +27,5 @@
   initial = 'mouse',
+  attachClass = false,
+  classPrefix = '',
+  updateOn = 'pointerdown',
 }: UsePointerTypeOptions = {}) => {
@@ -21,81 +39,24 @@ const [pointerType, setPointerType] = useState<PointerType>(initial);
 
-    document.addEventListener('pointerdown', handler);
+    document.addEventListener(updateOn, handler);
 
     return () => {
-      document.removeEventListener('pointerdown', handler);
+      document.removeEventListener(updateOn, handler);
     };
   }, []);
 
-  return pointerType;
-};
-
-interface UseMatchPointerTypeOptions {
-  initial?: PointerType;
-}
-
-export const useMatchPointerType = (
-  pointerTypes: PointerType[],
-  { initial = 'mouse' }: UseMatchPointerTypeOptions = {}
-) => {
-  const type = usePointerType({ initial });
-
-  return pointerTypes.includes(type);
-};
-
-interface UsePointerTypeClassNameOptions {
-  prefix?: string;
-  initial?: PointerType;
-}
-
-export const usePointerTypeClassName = ({
-  prefix = '',
-  initial = 'mouse',
-}: UsePointerTypeClassNameOptions = {}) => {
-  const type = usePointerType({ initial });
-
   useEffect(() => {
-    document.documentElement.classList.add(prefix + type);
+    if (attachClass) {
+      document.documentElement.classList.add(classPrefix + pointerType);
 
-    return () => {
-      document.documentElement.classList.remove(prefix + 'mouse');
-      document.documentElement.classList.remove(prefix + 'touch');
-      document.documentElement.classList.remove(prefix + 'pen');
-    };
-  }, [type, prefix]);
-};
-
-interface UseMatchPointerTypeClassNameOptions {
-  match?: string;
-  noMatch?: string;
-  initial?: PointerType;
-}
-
-export const useMatchPointerTypeClassName = (
-  pointerTypes: PointerType[],
-  {
-    match: matchClass,
-    noMatch: noMatchClass,
-    initial = 'mouse',
-  }: UseMatchPointerTypeClassNameOptions
-) => {
-  const match = useMatchPointerType(pointerTypes, { initial });
-
-  useEffect(() => {
-    if (match && matchClass) {
-      document.documentElement.classList.add(matchClass);
+      return () => {
+        document.documentElement.classList.remove(classPrefix + 'mouse');
+        document.documentElement.classList.remove(classPrefix + 'touch');
+        document.documentElement.classList.remove(classPrefix + 'pen');
+      };
     }
 
-    if (!match && noMatchClass) {
-      document.documentElement.classList.add(noMatchClass);
-    }
+    return;
+  }, [pointerType, classPrefix, attachClass]);
 
-    return () => {
-      if (matchClass) {
-        document.documentElement.classList.remove(matchClass);
-      }
-      if (noMatchClass) {
-        document.documentElement.classList.remove(noMatchClass);
-      }
-    };
-  }, [match, matchClass, noMatchClass]);
+  return pointerType;
 };

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

4

-33.33%

Worsened metrics

Total package byte prevSize

17544

-34.84%

Lines of code

75

-39.52%

No dependency changes