reactanimationonscreen - npm Package Compare versions

Comparing version 0.8.0 to 0.9.0

lib/index.d.ts

@@ -1,3 +0,3 @@
-declare function useOnScreen(classNames: string[], animationClassNames: string[], offset?: number, useDebounce?: boolean): void;
+declare function useOnScreen(classNames: string[], animationClassNames: string[], offset?: number): void;
 export default useOnScreen;
 //# sourceMappingURL=index.d.ts.map

lib/index.d.ts.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAgBA,iBAAS,WAAW,CAClB,UAAU,EAAE,MAAM,EAAE,EACpB,mBAAmB,EAAE,MAAM,EAAE,EAC7B,MAAM,SAAI,EACV,WAAW,UAAO,QAsEnB;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,iBAAS,WAAW,CAClB,UAAU,EAAE,MAAM,EAAE,EACpB,mBAAmB,EAAE,MAAM,EAAE,EAC7B,MAAM,SAAI,QAgCX;AAED,eAAe,WAAW,CAAC"}

lib/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function debounce(func, wait, immediate) {
-    let timeout;
-    return () => {
-        let context = this;
-        let args = arguments;
-        let later = () => {
-            timeout = null;
-            if (!immediate)
-                func.apply(context, args);
-        };
-        let callNow = immediate && !timeout;
-        clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-        if (callNow)
-            func.apply(context, args);
-    };
-}
-function useOnScreen(classNames, animationClassNames, offset = 0, useDebounce = true) {
+function useOnScreen(classNames, animationClassNames, offset = 0) {
     window.onload = () => {
         for (let i = 0; i < classNames.length; i++) {
             let elements = [...document.getElementsByClassName(classNames[i])];
-            if (useDebounce) {
-                debounce((() => {
-                    elements.forEach((element) => {
-                        if (!element.classList.contains(animationClassNames[i])) {
-                            if (element.getBoundingClientRect().top <
-                                window.innerHeight - offset) {
-                                element.classList.add(animationClassNames[i]);
-                            }
-                        }
-                    });
-                })(), 500, false);
-            }
-            else {
+            elements.forEach((element) => {
+                if (!element.classList.contains(animationClassNames[i])) {
+                    if (element.getBoundingClientRect().top <
+                        window.innerHeight - offset) {
+                        element.classList.add(animationClassNames[i]);
+                    }
+                }
+            });
+        }
+        window.onscroll = () => {
+            for (let i = 0; i < classNames.length; i++) {
+                let elements = [...document.getElementsByClassName(classNames[i])];
                 elements.forEach((element) => {
@@ -46,29 +28,2 @@ if (!element.classList.contains(animationClassNames[i])) {
             }
-        }
-        window.onscroll = () => {
-            for (let i = 0; i < classNames.length; i++) {
-                let elements = [...document.getElementsByClassName(classNames[i])];
-                if (useDebounce) {
-                    debounce((() => {
-                        elements.forEach((element) => {
-                            if (!element.classList.contains(animationClassNames[i])) {
-                                if (element.getBoundingClientRect().top <
-                                    window.innerHeight - offset) {
-                                    element.classList.add(animationClassNames[i]);
-                                }
-                            }
-                        });
-                    })(), 500, false);
-                }
-                else {
-                    elements.forEach((element) => {
-                        if (!element.classList.contains(animationClassNames[i])) {
-                            if (element.getBoundingClientRect().top <
-                                window.innerHeight - offset) {
-                                element.classList.add(animationClassNames[i]);
-                            }
-                        }
-                    });
-                }
-            }
         };
@@ -75,0 +30,0 @@ };

lib/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;AAAA,SAAS,WAAW,CAClB,UAAoB,EACpB,mBAA6B,EAC7B,MAAM,GAAG,CAAC;IAEV,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE;QACnB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC1C,IAAI,QAAQ,GAAG,CAAC,GAAG,QAAQ,CAAC,sBAAsB,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACnE,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;gBAC3B,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,EAAE;oBACvD,IACE,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG;wBACnC,MAAM,CAAC,WAAW,GAAG,MAAM,EAC3B;wBACA,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;qBAC/C;iBACF;YACH,CAAC,CAAC,CAAC;SACJ;QACD,MAAM,CAAC,QAAQ,GAAG,GAAG,EAAE;YACrB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC1C,IAAI,QAAQ,GAAG,CAAC,GAAG,QAAQ,CAAC,sBAAsB,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACnE,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;oBAC3B,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,EAAE;wBACvD,IACE,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG;4BACnC,MAAM,CAAC,WAAW,GAAG,MAAM,EAC3B;4BACA,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;yBAC/C;qBACF;gBACH,CAAC,CAAC,CAAC;aACJ;QACH,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAED,kBAAe,WAAW,CAAC"}

package.json

 {
   "name": "reactanimationonscreen",
-  "version": "0.8.0",
-  "description": "React Animation On Screen is a custom hook to track if an element is on screen and apply some CSS to it.",
+  "version": "0.9.0",
+  "description": "React Animation On Screen is a custom hook to track if an element is on screen and apply some animation to it.",
   "main": "lib/index.js",
@@ -6,0 +6,0 @@ "types": "lib",

README.md

@@ -5,2 +5,4 @@ # React Animation On Screen
 
+[![NPM](https://img.shields.io/npm/v/reactanimationonscreen.svg)](https://www.npmjs.com/package/reactanimationonscreen) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
 ## Installation
@@ -14,3 +16,3 @@
 
-Initiate the function inside an useEffect passing an array of classnames you want to apply the animation, an array of css classes with the animations to be applied, the y offset amount to apply the animation and if you want to use a debounce function to improve performance.
+Initiate the function inside an useEffect passing an array of classnames you want to apply the animation, an array of css classes with the animations to be applied and the y offset amount to apply the animation.
 
@@ -21,3 +23,3 @@ ```tsx
 useEffect(() => {
-  const sections = useOnScreen(targetClassNames: string[], animationClassNames: string[], yOffset : number(optional), useDebounce:boolean(optional));
+  const sections = useOnScreen(targetClassNames: string[], animationClassNames: string[], yOffset : number(optional));
 }, []);
@@ -35,4 +37,3 @@ ```
     ["subtitleAnimation", "paragraphAnimation"],
-    0,
-    true
+    0
   );
@@ -39,0 +40,0 @@ }, []);

src/index.ts

@@ -1,22 +0,5 @@
-function debounce(this: void, func: any, wait: number, immediate: boolean) {
-  let timeout: any;
-  return () => {
-    let context = this;
-    let args = arguments;
-    let later = () => {
-      timeout = null;
-      if (!immediate) func.apply(context, args);
-    };
-    let callNow = immediate && !timeout;
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-    if (callNow) func.apply(context, args);
-  };
-}
-
 function useOnScreen(
   classNames: string[],
   animationClassNames: string[],
-  offset = 0,
-  useDebounce = true
+  offset = 0
 ) {
@@ -26,20 +9,16 @@ window.onload = () => {
       let elements = [...document.getElementsByClassName(classNames[i])];
-      if (useDebounce) {
-        debounce(
-          (() => {
-            elements.forEach((element) => {
-              if (!element.classList.contains(animationClassNames[i])) {
-                if (
-                  element.getBoundingClientRect().top <
-                  window.innerHeight - offset
-                ) {
-                  element.classList.add(animationClassNames[i]);
-                }
-              }
-            });
-          })(),
-          500,
-          false
-        );
-      } else {
+      elements.forEach((element) => {
+        if (!element.classList.contains(animationClassNames[i])) {
+          if (
+            element.getBoundingClientRect().top <
+            window.innerHeight - offset
+          ) {
+            element.classList.add(animationClassNames[i]);
+          }
+        }
+      });
+    }
+    window.onscroll = () => {
+      for (let i = 0; i < classNames.length; i++) {
+        let elements = [...document.getElementsByClassName(classNames[i])];
         elements.forEach((element) => {
@@ -56,36 +35,2 @@ if (!element.classList.contains(animationClassNames[i])) {
       }
-    }
-    window.onscroll = () => {
-      for (let i = 0; i < classNames.length; i++) {
-        let elements = [...document.getElementsByClassName(classNames[i])];
-        if (useDebounce) {
-          debounce(
-            (() => {
-              elements.forEach((element) => {
-                if (!element.classList.contains(animationClassNames[i])) {
-                  if (
-                    element.getBoundingClientRect().top <
-                    window.innerHeight - offset
-                  ) {
-                    element.classList.add(animationClassNames[i]);
-                  }
-                }
-              });
-            })(),
-            500,
-            false
-          );
-        } else {
-          elements.forEach((element) => {
-            if (!element.classList.contains(animationClassNames[i])) {
-              if (
-                element.getBoundingClientRect().top <
-                window.innerHeight - offset
-              ) {
-                element.classList.add(animationClassNames[i]);
-              }
-            }
-          });
-        }
-      }
     };
@@ -92,0 +37,0 @@ };

No alert changes

Improved metrics

Number of lines in readme file

41

2.5%

Worsened metrics

Total package byte prevSize

6589

-41.12%

Lines of code

91

-52.11%

No dependency changes