@stianlarsen/react-light-beam - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

dist/index.js

@@ -49,3 +49,3 @@ "use strict";
     (0, react_1.useEffect)(() => {
-        if (bodyElement) {
+        if (bodyElement && typeof window !== "undefined") {
             const handleScroll = () => {
@@ -69,9 +69,10 @@ if (elementRef.current) {
             // Attach scroll and resize event listeners
-            bodyElement.addEventListener("scroll", handleScroll);
-            window.addEventListener("resize", handleScroll);
+            const handleScrollThrottled = throttle(handleScroll); // Approx 60fps
+            bodyElement.addEventListener("scroll", handleScrollThrottled);
+            window.addEventListener("resize", handleScrollThrottled);
             // Initial call to handleScroll to set initial state
             handleScroll();
             return () => {
-                bodyElement.removeEventListener("scroll", handleScroll);
-                window.removeEventListener("resize", handleScroll);
+                bodyElement.removeEventListener("scroll", handleScrollThrottled);
+                window.removeEventListener("resize", handleScrollThrottled);
             };
@@ -96,4 +97,17 @@ }
             WebkitMaskImage: maskImage,
+            willChange: "background, opacity",
         }, ref: elementRef, id: id, className: `lightBeam ${className} ${lightBeam_module_css_1.default.react__light__beam}` }));
 };
 exports.LightBeam = LightBeam;
+const throttle = (func) => {
+    let ticking = false;
+    return function (...args) {
+        if (!ticking) {
+            requestAnimationFrame(() => {
+                func.apply(this, args);
+                ticking = false;
+            });
+            ticking = true;
+        }
+    };
+};

package.json

 {
   "name": "@stianlarsen/react-light-beam",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "A customizable React component that creates a light beam effect using conic gradients. Supports dark mode and various customization options.",
@@ -43,3 +43,4 @@ "main": "dist/index.js",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "@emotion/is-prop-valid": "^1.3.1"
   },
@@ -53,5 +54,4 @@ "devDependencies": {
   "dependencies": {
-    "@emotion/is-prop-valid": "^1.3.1",
     "framer-motion": "^11.11.1"
   }
 }

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

Improved metrics

Total package byte prevSize

17238

increased by3.14%

Lines of code

168

increased by9.8%

Dependency changes

• - Removed@emotion/is-prop-valid@^1.3.1