@stianlarsen/react-light-beam 1.0.4 → 1.0.6

package/README.md

@@ -2,8 +2,6 @@
 
 [![npm version](https://badge.fury.io/js/%40stianlarsen%2Freact-light-beam.svg)](https://badge.fury.io/js/%40stianlarsen%2Freact-light-beam)
 
-![Preview / example image](https://github.com/Stianlars1/react-light-beam/blob/5422cdc60ae7ab6b52d644d452646bec7212f76f/lightBeam.png)
-
 A customizable React component that creates a light beam effect using conic gradients. The component is fully responsive and supports both light and dark modes. Ideal for adding dynamic and engaging visual elements to your web applications.
 
 ## Preview

package/dist/css/lightBeam.module.css

@@ -3,4 +3,8 @@
   width: 100vw;
   transition: all 0.5s ease;
   will-change: auto;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  pointer-events: none;
 }/*# sourceMappingURL=lightBeam.module.css.map */

package/dist/index.js

@@ -35,39 +35,45 @@ const useDarkmode_1 = require("./hooks/useDarkmode");
 const LightBeam = ({ className, colorLightmode = "rgba(0,0,0, 0.5)", colorDarkmode = "rgba(255, 255, 255, 0.5)", maskLightByProgress = false, fullWidth = 1.0, // Default to full width
 invert = false, id = undefined, }) => {
     const elementRef = (0, react_1.useRef)(null);
-    const bodyRef = (0, react_1.useRef)(document.body);
+    const [bodyElement, setBodyElement] = (0, react_1.useState)(null); // State to hold the body element
     const inViewProgress = (0, framer_motion_1.useMotionValue)(0);
     const opacity = (0, framer_motion_1.useMotionValue)(0.839322);
     const { isDarkmode } = (0, useDarkmode_1.useIsDarkmode)();
     const chosenColor = isDarkmode ? colorDarkmode : colorLightmode;
     (0, react_1.useEffect)(() => {
-        const handleScroll = () => {
-            if (elementRef.current) {
-                const rect = elementRef.current.getBoundingClientRect();
-                const windowHeight = window.innerHeight;
-                // Invert the fullWidth value: 1 becomes 0, and 0 becomes 1
-                const adjustedFullWidth = 1 - fullWidth;
-                // Calculate progress
-                const progress = invert
-                    ? 0 +
-                        Math.max(adjustedFullWidth, Math.min(1, rect.top / windowHeight))
-                    : 1 -
-                        Math.max(adjustedFullWidth, Math.min(1, rect.top / windowHeight));
-                // Update motion values
-                inViewProgress.set(progress);
-                opacity.set(0.839322 + (1 - 0.839322) * progress);
-            }
-        };
-        // Attach scroll and resize event listeners
-        bodyRef.current.addEventListener("scroll", handleScroll);
-        bodyRef.current.addEventListener("resize", handleScroll);
-        // Initial call to handleScroll to set initial state
-        handleScroll();
-        return () => {
-            bodyRef.current.removeEventListener("scroll", handleScroll);
-            bodyRef.current.removeEventListener("resize", handleScroll);
-        };
-    }, [inViewProgress, opacity]);
+        // Set the body element after the component mounts
+        setBodyElement(document.body);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (bodyElement) {
+            const handleScroll = () => {
+                if (elementRef.current) {
+                    const rect = elementRef.current.getBoundingClientRect();
+                    const windowHeight = window.innerHeight;
+                    // Invert the fullWidth value: 1 becomes 0, and 0 becomes 1
+                    const adjustedFullWidth = 1 - fullWidth;
+                    // Calculate progress
+                    const progress = invert
+                        ? 0 +
+                            Math.max(adjustedFullWidth, Math.min(1, rect.top / windowHeight))
+                        : 1 -
+                            Math.max(adjustedFullWidth, Math.min(1, rect.top / windowHeight));
+                    // Update motion values
+                    inViewProgress.set(progress);
+                    opacity.set(0.839322 + (1 - 0.839322) * progress);
+                }
+            };
+            // Attach scroll and resize event listeners
+            bodyElement.addEventListener("scroll", handleScroll);
+            window.addEventListener("resize", handleScroll);
+            // Initial call to handleScroll to set initial state
+            handleScroll();
+            return () => {
+                bodyElement.removeEventListener("scroll", handleScroll);
+                window.removeEventListener("resize", handleScroll);
+            };
+        }
+    }, [bodyElement, inViewProgress, opacity]);
     const backgroundPosition = (0, framer_motion_1.useTransform)(inViewProgress, [0, 1], [
         `conic-gradient(from 90deg at 90% 0%, ${chosenColor}, transparent 180deg) 0% 0% / 50% 150% no-repeat, conic-gradient(from 270deg at 10% 0%, transparent 180deg, ${chosenColor}) 100% 0% / 50% 100% no-repeat`,
         `conic-gradient(from 90deg at 0% 0%, ${chosenColor}, transparent 180deg) 0% 0% / 50% 100% no-repeat, conic-gradient(from 270deg at 100% 0%, transparent 180deg, ${chosenColor}) 100% 0% / 50% 100% no-repeat`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stianlarsen/react-light-beam",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "A customizable React component that creates a light beam effect using conic gradients. Supports dark mode and various customization options.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",