reactanimationonscreen - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

lib/index.d.ts

@@ -1,3 +0,3 @@
-declare function useOnScreen(classNames: string[], animationClassNames: string[], offset?: number): void;
+declare function useOnScreen(classNames: string[], animationClassNames: string[], offset?: number, onlyOnScreen?: boolean): 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":"AAAA,iBAAS,WAAW,CAClB,UAAU,EAAE,MAAM,EAAE,EACpB,mBAAmB,EAAE,MAAM,EAAE,EAC7B,MAAM,SAAI,QAgCX;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,EACV,YAAY,UAAQ,QAoDrB;AAED,eAAe,WAAW,CAAC"}

lib/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function useOnScreen(classNames, animationClassNames, offset = 0) {
+function useOnScreen(classNames, animationClassNames, offset = 0, onlyOnScreen = false) {
     window.onload = () => {
@@ -9,6 +9,15 @@ for (let i = 0; i < classNames.length; i++) {
                 if (!element.classList.contains(animationClassNames[i])) {
-                    if (element.getBoundingClientRect().top <
-                        window.innerHeight - offset) {
-                        element.classList.add(animationClassNames[i]);
+                    if (onlyOnScreen) {
+                        if (element.getBoundingClientRect().top <
+                            window.innerHeight - offset &&
+                            element.getBoundingClientRect().bottom) {
+                            element.classList.add(animationClassNames[i]);
+                        }
                     }
+                    else {
+                        if (element.getBoundingClientRect().top <
+                            window.innerHeight - offset) {
+                            element.classList.add(animationClassNames[i]);
+                        }
+                    }
                 }
@@ -22,6 +31,15 @@ });
                     if (!element.classList.contains(animationClassNames[i])) {
-                        if (element.getBoundingClientRect().top <
-                            window.innerHeight - offset) {
-                            element.classList.add(animationClassNames[i]);
+                        if (onlyOnScreen) {
+                            if (element.getBoundingClientRect().top <
+                                window.innerHeight - offset &&
+                                element.getBoundingClientRect().bottom) {
+                                element.classList.add(animationClassNames[i]);
+                            }
                         }
+                        else {
+                            if (element.getBoundingClientRect().top <
+                                window.innerHeight - offset) {
+                                element.classList.add(animationClassNames[i]);
+                            }
+                        }
                     }
@@ -28,0 +46,0 @@ });

lib/index.js.map

@@ -1,1 +0,1 @@
-{"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;AAAA,SAAS,WAAW,CAClB,UAAoB,EACpB,mBAA6B,EAC7B,MAAM,GAAG,CAAC,EACV,YAAY,GAAG,KAAK;IAEpB,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,IAAI,YAAY,EAAE;wBAChB,IACE,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG;4BACjC,MAAM,CAAC,WAAW,GAAG,MAAM;4BAC7B,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,EACtC;4BACA,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;yBAC/C;qBACF;yBAAM;wBACL,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;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,IAAI,YAAY,EAAE;4BAChB,IACE,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG;gCACjC,MAAM,CAAC,WAAW,GAAG,MAAM;gCAC7B,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,EACtC;gCACA,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;6BAC/C;yBACF;6BAAM;4BACL,IACE,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG;gCACnC,MAAM,CAAC,WAAW,GAAG,MAAM,EAC3B;gCACA,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;6BAC/C;yBACF;qBACF;gBACH,CAAC,CAAC,CAAC;aACJ;QACH,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAED,kBAAe,WAAW,CAAC"}

package.json

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

README.md

@@ -38,3 +38,3 @@ # React Animation On Screen
 
-## Extra Feature
+## Extra Feature 1
 
@@ -53,2 +53,12 @@ By default the animation is applied when the target starts to appear on the bottom of the screen but if you want the animation to be applied later you can pass a third argument to the function call.
 
-MIT Lnardon 2020
+## Extra Feature 2
+
+By default the animation is applied only the first time the target appears on the viewport, but if you want the animation to be applied everytime the target enters the viewport pass a boolean true value as the fourth argument to the function call.
+
+```jsx
+import useOnScreen from "reactanimationonscreen";
+
+useEffect(() => {
+  const sections = useOnScreen(["title"], ["titleAnimation"], 0, true);
+}, []);
+```

src/index.ts

 function useOnScreen(
   classNames: string[],
   animationClassNames: string[],
-  offset = 0
+  offset = 0,
+  onlyOnScreen = false
 ) {
@@ -11,7 +12,17 @@ window.onload = () => {
         if (!element.classList.contains(animationClassNames[i])) {
-          if (
-            element.getBoundingClientRect().top <
-            window.innerHeight - offset
-          ) {
-            element.classList.add(animationClassNames[i]);
+          if (onlyOnScreen) {
+            if (
+              element.getBoundingClientRect().top <
+                window.innerHeight - offset &&
+              element.getBoundingClientRect().bottom
+            ) {
+              element.classList.add(animationClassNames[i]);
+            }
+          } else {
+            if (
+              element.getBoundingClientRect().top <
+              window.innerHeight - offset
+            ) {
+              element.classList.add(animationClassNames[i]);
+            }
           }
@@ -26,7 +37,17 @@ }
           if (!element.classList.contains(animationClassNames[i])) {
-            if (
-              element.getBoundingClientRect().top <
-              window.innerHeight - offset
-            ) {
-              element.classList.add(animationClassNames[i]);
+            if (onlyOnScreen) {
+              if (
+                element.getBoundingClientRect().top <
+                  window.innerHeight - offset &&
+                element.getBoundingClientRect().bottom
+              ) {
+                element.classList.add(animationClassNames[i]);
+              }
+            } else {
+              if (
+                element.getBoundingClientRect().top <
+                window.innerHeight - offset
+              ) {
+                element.classList.add(animationClassNames[i]);
+              }
             }
@@ -33,0 +54,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

9507

36.83%

Lines of code

130

42.86%

Number of lines in readme file

63

18.87%

No dependency changes