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;
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

17544

decreased by-34.84%

Lines of code

75

decreased by-39.52%

No dependency changes