@stianlarsen/react-light-beam 3.1.1 → 3.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +25 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +25 -5
- package/dist/index.js.map +1 -1
- package/package.json +5 -11
- package/dist/index.css +0 -13
- package/dist/index.css.map +0 -1
package/dist/index.cjs
CHANGED
|
@@ -27,10 +27,30 @@ module.exports = __toCommonJS(index_exports);
|
|
|
27
27
|
var import_framer_motion = require("framer-motion");
|
|
28
28
|
var import_react2 = require("react");
|
|
29
29
|
|
|
30
|
-
//
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
// #style-inject:#style-inject
|
|
31
|
+
function styleInject(css, { insertAt } = {}) {
|
|
32
|
+
if (!css || typeof document === "undefined") return;
|
|
33
|
+
const head = document.head || document.getElementsByTagName("head")[0];
|
|
34
|
+
const style = document.createElement("style");
|
|
35
|
+
style.type = "text/css";
|
|
36
|
+
if (insertAt === "top") {
|
|
37
|
+
if (head.firstChild) {
|
|
38
|
+
head.insertBefore(style, head.firstChild);
|
|
39
|
+
} else {
|
|
40
|
+
head.appendChild(style);
|
|
41
|
+
}
|
|
42
|
+
} else {
|
|
43
|
+
head.appendChild(style);
|
|
44
|
+
}
|
|
45
|
+
if (style.styleSheet) {
|
|
46
|
+
style.styleSheet.cssText = css;
|
|
47
|
+
} else {
|
|
48
|
+
style.appendChild(document.createTextNode(css));
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// src/css/lightBeam.css
|
|
53
|
+
styleInject(".react__light__beam {\n height: 500px;\n width: 100vw;\n transition: all 0.25s ease;\n will-change: all;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n pointer-events: none;\n -webkit-transition: all 0.25s ease;\n}\n");
|
|
34
54
|
|
|
35
55
|
// src/hooks/useDarkmode.tsx
|
|
36
56
|
var import_react = require("react");
|
|
@@ -125,7 +145,7 @@ var LightBeam = ({
|
|
|
125
145
|
},
|
|
126
146
|
ref: elementRef,
|
|
127
147
|
id,
|
|
128
|
-
className: `lightBeam ${className}
|
|
148
|
+
className: `lightBeam ${className} react__light__beam`
|
|
129
149
|
}
|
|
130
150
|
);
|
|
131
151
|
};
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.tsx","../src/css/lightBeam.
|
|
1
|
+
{"version":3,"sources":["../src/index.tsx","#style-inject:#style-inject","../src/css/lightBeam.css","../src/hooks/useDarkmode.tsx"],"sourcesContent":["\"use client\";\nimport { motion, useMotionValue, useTransform } from \"framer-motion\";\nimport React, { useEffect, useRef } from \"react\";\nimport { LightBeamProps } from \"../types/types\";\nexport type { LightBeamProps } from \"../types/types\";\nimport \"./css/lightBeam.css\";\nimport { useIsDarkmode } from \"./hooks/useDarkmode\";\n\nexport const LightBeam = ({\n className,\n colorLightmode = \"rgba(0,0,0, 0.5)\",\n colorDarkmode = \"rgba(255, 255, 255, 0.5)\",\n maskLightByProgress = false,\n fullWidth = 1.0, // Default to full width\n invert = false,\n id = undefined,\n onLoaded = undefined,\n scrollElement, // Add this line\n}: LightBeamProps) => {\n const elementRef = useRef<HTMLDivElement>(null);\n const inViewProgress = useMotionValue(0);\n const opacity = useMotionValue(0.839322);\n const { isDarkmode } = useIsDarkmode();\n const chosenColor = isDarkmode ? colorDarkmode : colorLightmode;\n\n useEffect(() => {\n onLoaded && onLoaded();\n }, []);\n\n useEffect(() => {\n if (typeof window !== \"undefined\") {\n const handleScroll = () => {\n if (elementRef.current) {\n const rect = elementRef.current.getBoundingClientRect();\n const windowHeight = window.innerHeight;\n\n // Invert the fullWidth value: 1 becomes 0, and 0 becomes 1\n const adjustedFullWidth = 1 - fullWidth;\n\n // Calculate progress\n const progress = invert\n ? 0 +\n Math.max(adjustedFullWidth, Math.min(1, rect.top / windowHeight))\n : 1 -\n Math.max(adjustedFullWidth, Math.min(1, rect.top / windowHeight));\n\n // Update motion values\n inViewProgress.set(progress);\n opacity.set(0.839322 + (1 - 0.839322) * progress);\n }\n };\n\n const handleScrollThrottled = throttle(handleScroll); // Approx 60fps\n\n const target = scrollElement || window;\n\n target.addEventListener(\"scroll\", handleScrollThrottled);\n window.addEventListener(\"resize\", handleScrollThrottled);\n\n // Initial call to handleScroll to set initial state\n handleScroll();\n\n return () => {\n target.removeEventListener(\"scroll\", handleScrollThrottled);\n window.removeEventListener(\"resize\", handleScrollThrottled);\n };\n }\n }, [inViewProgress, opacity, scrollElement]);\n\n const backgroundPosition = useTransform(\n inViewProgress,\n [0, 1],\n [\n `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`,\n `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`,\n ]\n );\n const maskImageOpacity = useTransform(\n inViewProgress,\n [0, 1],\n [\n `linear-gradient(to bottom, ${chosenColor} 0%, transparent 50%)`,\n `linear-gradient(to bottom, ${chosenColor} 0%, transparent 95%)`,\n ]\n );\n\n const maskImage = maskLightByProgress\n ? maskImageOpacity\n : `linear-gradient(to bottom, ${chosenColor} 25%, transparent 95%)`;\n\n return (\n <motion.div\n style={{\n background: backgroundPosition,\n opacity: opacity,\n maskImage: maskImage,\n WebkitMaskImage: maskImage,\n willChange: \"background, opacity\",\n }}\n ref={elementRef}\n id={id}\n className={`lightBeam ${className} react__light__beam`}\n />\n );\n};\n\nconst throttle = (func: Function) => {\n let ticking = false;\n return function (this: any, ...args: any[]) {\n if (!ticking) {\n requestAnimationFrame(() => {\n func.apply(this, args);\n ticking = false;\n });\n ticking = true;\n }\n };\n};\n","\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const style = document.createElement('style')\n style.type = 'text/css'\n \n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild)\n } else {\n head.appendChild(style)\n }\n } else {\n head.appendChild(style)\n }\n \n if (style.styleSheet) {\n style.styleSheet.cssText = css\n } else {\n style.appendChild(document.createTextNode(css))\n }\n }\n ","import styleInject from '#style-inject';styleInject(\".react__light__beam {\\n height: 500px;\\n width: 100vw;\\n transition: all 0.25s ease;\\n will-change: all;\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n user-select: none;\\n pointer-events: none;\\n -webkit-transition: all 0.25s ease;\\n}\\n\")","\"use client\";\nimport { useEffect, useState } from \"react\";\n\nexport const useIsDarkmode = () => {\n const [isDarkmode, setIsDarkmodeActive] = useState(false);\n\n useEffect(() => {\n const matchMedia = window.matchMedia(\"(prefers-color-scheme: dark)\");\n\n const handleChange = () => {\n setIsDarkmodeActive(matchMedia.matches);\n };\n\n // Set the initial value\n setIsDarkmodeActive(matchMedia.matches);\n\n // Listen for changes\n matchMedia.addEventListener(\"change\", handleChange);\n\n // Cleanup listener on unmount\n return () => {\n matchMedia.removeEventListener(\"change\", handleChange);\n };\n }, []);\n\n return { isDarkmode };\n};\n"],"mappings":"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","names":["import_react"]}
|
package/dist/index.js
CHANGED
|
@@ -4,10 +4,30 @@
|
|
|
4
4
|
import { motion, useMotionValue, useTransform } from "framer-motion";
|
|
5
5
|
import { useEffect as useEffect2, useRef } from "react";
|
|
6
6
|
|
|
7
|
-
//
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
// #style-inject:#style-inject
|
|
8
|
+
function styleInject(css, { insertAt } = {}) {
|
|
9
|
+
if (!css || typeof document === "undefined") return;
|
|
10
|
+
const head = document.head || document.getElementsByTagName("head")[0];
|
|
11
|
+
const style = document.createElement("style");
|
|
12
|
+
style.type = "text/css";
|
|
13
|
+
if (insertAt === "top") {
|
|
14
|
+
if (head.firstChild) {
|
|
15
|
+
head.insertBefore(style, head.firstChild);
|
|
16
|
+
} else {
|
|
17
|
+
head.appendChild(style);
|
|
18
|
+
}
|
|
19
|
+
} else {
|
|
20
|
+
head.appendChild(style);
|
|
21
|
+
}
|
|
22
|
+
if (style.styleSheet) {
|
|
23
|
+
style.styleSheet.cssText = css;
|
|
24
|
+
} else {
|
|
25
|
+
style.appendChild(document.createTextNode(css));
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
// src/css/lightBeam.css
|
|
30
|
+
styleInject(".react__light__beam {\n height: 500px;\n width: 100vw;\n transition: all 0.25s ease;\n will-change: all;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n pointer-events: none;\n -webkit-transition: all 0.25s ease;\n}\n");
|
|
11
31
|
|
|
12
32
|
// src/hooks/useDarkmode.tsx
|
|
13
33
|
import { useEffect, useState } from "react";
|
|
@@ -102,7 +122,7 @@ var LightBeam = ({
|
|
|
102
122
|
},
|
|
103
123
|
ref: elementRef,
|
|
104
124
|
id,
|
|
105
|
-
className: `lightBeam ${className}
|
|
125
|
+
className: `lightBeam ${className} react__light__beam`
|
|
106
126
|
}
|
|
107
127
|
);
|
|
108
128
|
};
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.tsx","../src/css/lightBeam.
|
|
1
|
+
{"version":3,"sources":["../src/index.tsx","#style-inject:#style-inject","../src/css/lightBeam.css","../src/hooks/useDarkmode.tsx"],"sourcesContent":["\"use client\";\nimport { motion, useMotionValue, useTransform } from \"framer-motion\";\nimport React, { useEffect, useRef } from \"react\";\nimport { LightBeamProps } from \"../types/types\";\nexport type { LightBeamProps } from \"../types/types\";\nimport \"./css/lightBeam.css\";\nimport { useIsDarkmode } from \"./hooks/useDarkmode\";\n\nexport const LightBeam = ({\n className,\n colorLightmode = \"rgba(0,0,0, 0.5)\",\n colorDarkmode = \"rgba(255, 255, 255, 0.5)\",\n maskLightByProgress = false,\n fullWidth = 1.0, // Default to full width\n invert = false,\n id = undefined,\n onLoaded = undefined,\n scrollElement, // Add this line\n}: LightBeamProps) => {\n const elementRef = useRef<HTMLDivElement>(null);\n const inViewProgress = useMotionValue(0);\n const opacity = useMotionValue(0.839322);\n const { isDarkmode } = useIsDarkmode();\n const chosenColor = isDarkmode ? colorDarkmode : colorLightmode;\n\n useEffect(() => {\n onLoaded && onLoaded();\n }, []);\n\n useEffect(() => {\n if (typeof window !== \"undefined\") {\n const handleScroll = () => {\n if (elementRef.current) {\n const rect = elementRef.current.getBoundingClientRect();\n const windowHeight = window.innerHeight;\n\n // Invert the fullWidth value: 1 becomes 0, and 0 becomes 1\n const adjustedFullWidth = 1 - fullWidth;\n\n // Calculate progress\n const progress = invert\n ? 0 +\n Math.max(adjustedFullWidth, Math.min(1, rect.top / windowHeight))\n : 1 -\n Math.max(adjustedFullWidth, Math.min(1, rect.top / windowHeight));\n\n // Update motion values\n inViewProgress.set(progress);\n opacity.set(0.839322 + (1 - 0.839322) * progress);\n }\n };\n\n const handleScrollThrottled = throttle(handleScroll); // Approx 60fps\n\n const target = scrollElement || window;\n\n target.addEventListener(\"scroll\", handleScrollThrottled);\n window.addEventListener(\"resize\", handleScrollThrottled);\n\n // Initial call to handleScroll to set initial state\n handleScroll();\n\n return () => {\n target.removeEventListener(\"scroll\", handleScrollThrottled);\n window.removeEventListener(\"resize\", handleScrollThrottled);\n };\n }\n }, [inViewProgress, opacity, scrollElement]);\n\n const backgroundPosition = useTransform(\n inViewProgress,\n [0, 1],\n [\n `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`,\n `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`,\n ]\n );\n const maskImageOpacity = useTransform(\n inViewProgress,\n [0, 1],\n [\n `linear-gradient(to bottom, ${chosenColor} 0%, transparent 50%)`,\n `linear-gradient(to bottom, ${chosenColor} 0%, transparent 95%)`,\n ]\n );\n\n const maskImage = maskLightByProgress\n ? maskImageOpacity\n : `linear-gradient(to bottom, ${chosenColor} 25%, transparent 95%)`;\n\n return (\n <motion.div\n style={{\n background: backgroundPosition,\n opacity: opacity,\n maskImage: maskImage,\n WebkitMaskImage: maskImage,\n willChange: \"background, opacity\",\n }}\n ref={elementRef}\n id={id}\n className={`lightBeam ${className} react__light__beam`}\n />\n );\n};\n\nconst throttle = (func: Function) => {\n let ticking = false;\n return function (this: any, ...args: any[]) {\n if (!ticking) {\n requestAnimationFrame(() => {\n func.apply(this, args);\n ticking = false;\n });\n ticking = true;\n }\n };\n};\n","\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const style = document.createElement('style')\n style.type = 'text/css'\n \n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild)\n } else {\n head.appendChild(style)\n }\n } else {\n head.appendChild(style)\n }\n \n if (style.styleSheet) {\n style.styleSheet.cssText = css\n } else {\n style.appendChild(document.createTextNode(css))\n }\n }\n ","import styleInject from '#style-inject';styleInject(\".react__light__beam {\\n height: 500px;\\n width: 100vw;\\n transition: all 0.25s ease;\\n will-change: all;\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n user-select: none;\\n pointer-events: none;\\n -webkit-transition: all 0.25s ease;\\n}\\n\")","\"use client\";\nimport { useEffect, useState } from \"react\";\n\nexport const useIsDarkmode = () => {\n const [isDarkmode, setIsDarkmodeActive] = useState(false);\n\n useEffect(() => {\n const matchMedia = window.matchMedia(\"(prefers-color-scheme: dark)\");\n\n const handleChange = () => {\n setIsDarkmodeActive(matchMedia.matches);\n };\n\n // Set the initial value\n setIsDarkmodeActive(matchMedia.matches);\n\n // Listen for changes\n matchMedia.addEventListener(\"change\", handleChange);\n\n // Cleanup listener on unmount\n return () => {\n matchMedia.removeEventListener(\"change\", handleChange);\n };\n }, []);\n\n return { isDarkmode };\n};\n"],"mappings":"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","names":["useEffect","useEffect"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stianlarsen/react-light-beam",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.3",
|
|
4
4
|
"description": "A customizable React component that creates a light beam effect using conic gradients. Supports dark mode and various customization options.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
@@ -46,23 +46,17 @@
|
|
|
46
46
|
"url": "https://github.com/stianalars1/react-light-beam/issues"
|
|
47
47
|
},
|
|
48
48
|
"homepage": "https://github.com/stianalars1/react-light-beam#readme",
|
|
49
|
+
"dependencies": {
|
|
50
|
+
"framer-motion": "^11.11.1"
|
|
51
|
+
},
|
|
49
52
|
"peerDependencies": {
|
|
50
|
-
"@emotion/is-prop-valid": "^1.3.1",
|
|
51
|
-
"framer-motion": "^11.11.1",
|
|
52
53
|
"react": "^18 || ^19",
|
|
53
54
|
"react-dom": "^18 || ^19"
|
|
54
55
|
},
|
|
55
|
-
"peerDependenciesMeta": {
|
|
56
|
-
"framer-motion": {
|
|
57
|
-
"optional": false
|
|
58
|
-
},
|
|
59
|
-
"@emotion/is-prop-valid": {
|
|
60
|
-
"optional": true
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
56
|
"devDependencies": {
|
|
64
57
|
"@types/react": "^18 || ^19",
|
|
65
58
|
"@types/react-dom": "^18 || ^19",
|
|
59
|
+
"framer-motion": "^12.38.0",
|
|
66
60
|
"tsup": "^8.5.1",
|
|
67
61
|
"typescript": "^5.5.4"
|
|
68
62
|
}
|
package/dist/index.css
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/* src/css/lightBeam.module.css */
|
|
2
|
-
.lightBeam_react__light__beam {
|
|
3
|
-
height: 500px;
|
|
4
|
-
width: 100vw;
|
|
5
|
-
transition: all 0.25s ease;
|
|
6
|
-
will-change: all;
|
|
7
|
-
-webkit-user-select: none;
|
|
8
|
-
-moz-user-select: none;
|
|
9
|
-
user-select: none;
|
|
10
|
-
pointer-events: none;
|
|
11
|
-
-webkit-transition: all 0.25s ease;
|
|
12
|
-
}
|
|
13
|
-
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/css/lightBeam.module.scss","../src/css/lightBeam.module.css"],"sourcesContent":[".react__light__beam {\n height: 500px;\n width: 100vw;\n transition: all 0.25s ease;\n will-change: all;\n user-select: none;\n pointer-events: none;\n -webkit-transition: all 0.25s ease;\n}\n",".react__light__beam {\n height: 500px;\n width: 100vw;\n transition: all 0.25s ease;\n will-change: all;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n pointer-events: none;\n -webkit-transition: all 0.25s ease;\n}/*# sourceMappingURL=lightBeam.module.css.map */"],"mappings":";AAAA,CAAAA;AACE,UAAA;AACA,SAAA;AACA,cAAA,IAAA,MAAA;AACA,eAAA;AACA,uBAAA;AAAA,oBAAA;AAAA,eAAA;AACA,kBAAA;AACA,sBAAA,IAAA,MAAA;ACCF;","names":["react__light__beam"]}
|