@stianlarsen/react-light-beam 1.0.2 → 1.0.4
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/README.md +70 -12
- package/dist/css/lightBeam.module.css +6 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +24 -12
- package/package.json +3 -2
- package/types/global.d.ts +9 -0
- package/types/types.d.ts +3 -0
package/README.md
CHANGED
|
@@ -2,8 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://badge.fury.io/js/%40stianlarsen%2Freact-light-beam)
|
|
4
4
|
|
|
5
|
+
|
|
6
|
+
|
|
5
7
|
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.
|
|
6
8
|
|
|
9
|
+
## Preview
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
_A preview of @stianlarsen/react-light-beam_
|
|
14
|
+
|
|
7
15
|
## Installation
|
|
8
16
|
|
|
9
17
|
```bash
|
|
@@ -26,10 +34,13 @@ const App = () => {
|
|
|
26
34
|
return (
|
|
27
35
|
<div className="your-container-class">
|
|
28
36
|
<LightBeam
|
|
37
|
+
id="unique-lightbeam"
|
|
29
38
|
className="your-lightbeam-class"
|
|
30
|
-
colorDarkmode="
|
|
31
|
-
colorLightmode="
|
|
39
|
+
colorDarkmode="rgba(255, 255, 255, 0.8)"
|
|
40
|
+
colorLightmode="rgba(0, 0, 0, 0.2)"
|
|
32
41
|
fullWidth={0.8}
|
|
42
|
+
maskLightByProgress={true}
|
|
43
|
+
invert={false}
|
|
33
44
|
/>
|
|
34
45
|
<YourContentHere />
|
|
35
46
|
</div>
|
|
@@ -41,16 +52,60 @@ export default App;
|
|
|
41
52
|
|
|
42
53
|
### Props
|
|
43
54
|
|
|
44
|
-
| Prop Name
|
|
45
|
-
|
|
|
46
|
-
| `
|
|
47
|
-
| `
|
|
48
|
-
| `
|
|
49
|
-
| `
|
|
55
|
+
| Prop Name | Type | Default Value | Description |
|
|
56
|
+
| --------------------- | --------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
57
|
+
| `id` | `string` | `undefined` | Optional string representing a unique ID for the LightBeam container. |
|
|
58
|
+
| `className` | `string` | `undefined` | Optional string representing custom classes to be added to the LightBeam container. |
|
|
59
|
+
| `colorLightmode` | `string` | `rgba(0,0,0, 0.5)` | Optional string representing the color of the light beam in light mode. |
|
|
60
|
+
| `colorDarkmode` | `string` | `rgba(255, 255, 255, 0.5)` | Optional string representing the color of the light beam in dark mode. |
|
|
61
|
+
| `fullWidth` | `number` | `1.0` | Optional number between `0` and `1` representing the maximum width the light beam can reach. |
|
|
62
|
+
| `maskLightByProgress` | `boolean` | `false` | If `true`, the `mask-image`'s linear gradient will start with the chosen color at 0% and the transparent part starting at 50%. As the user scrolls, it will dynamically change to have the transparent part at 95%, reducing the glow effect. If `false`, it will default to `linear-gradient(to bottom, chosenColor 25%, transparent 95%)`. |
|
|
63
|
+
| `invert` | `boolean` | `false` | Optional boolean to invert the scroll progress calculation. |
|
|
64
|
+
|
|
65
|
+
### Default Configuration
|
|
66
|
+
|
|
67
|
+
The component comes with the following default styles:
|
|
68
|
+
|
|
69
|
+
```css
|
|
70
|
+
.react__light__beam {
|
|
71
|
+
height: 500px;
|
|
72
|
+
width: 100vw;
|
|
73
|
+
transition: all 0.5s ease;
|
|
74
|
+
will-change: auto;
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
These default styles ensure that the component is immediately visible when added to your application. However, for more effective use, you might want to customize its position and behavior.
|
|
50
79
|
|
|
51
|
-
###
|
|
80
|
+
### Recommended Usage
|
|
52
81
|
|
|
53
|
-
|
|
82
|
+
For best results, it's recommended to position the `LightBeam` component as an absolutely positioned element within a relatively positioned container. This allows the light beam to cast light downwards over your content, creating a more dynamic and engaging visual effect.
|
|
83
|
+
|
|
84
|
+
Example:
|
|
85
|
+
|
|
86
|
+
```jsx
|
|
87
|
+
<div className="container">
|
|
88
|
+
<LightBeam className="lightBeam" />
|
|
89
|
+
</div>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
And in your CSS or SCSS:
|
|
93
|
+
|
|
94
|
+
```scss
|
|
95
|
+
.container {
|
|
96
|
+
position: relative;
|
|
97
|
+
z-index: 1;
|
|
98
|
+
|
|
99
|
+
.lightBeam {
|
|
100
|
+
position: absolute;
|
|
101
|
+
inset: 0;
|
|
102
|
+
width: 100vw;
|
|
103
|
+
height: 100%; // Important: Ensure the beam covers the entire height
|
|
104
|
+
z-index: -1;
|
|
105
|
+
margin-top: -300px; // Adjust as needed to position the light beam above the content
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
```
|
|
54
109
|
|
|
55
110
|
### Dark Mode Support
|
|
56
111
|
|
|
@@ -60,10 +115,13 @@ The component automatically adjusts between light and dark modes based on the us
|
|
|
60
115
|
|
|
61
116
|
```jsx
|
|
62
117
|
<LightBeam
|
|
118
|
+
id="lightbeam-example"
|
|
63
119
|
className="custom-lightbeam"
|
|
64
|
-
colorDarkmode="
|
|
65
|
-
colorLightmode="
|
|
120
|
+
colorDarkmode="rgba(255, 255, 255, 0.8)"
|
|
121
|
+
colorLightmode="rgba(0, 0, 0, 0.2)"
|
|
66
122
|
fullWidth={0.5}
|
|
123
|
+
maskLightByProgress={true}
|
|
124
|
+
invert={true}
|
|
67
125
|
/>
|
|
68
126
|
```
|
|
69
127
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { LightBeamProps } from "../types/types";
|
|
3
|
-
export declare const LightBeam: ({ className, colorLightmode, colorDarkmode, fullWidth, }: LightBeamProps) => React.JSX.Element;
|
|
3
|
+
export declare const LightBeam: ({ className, colorLightmode, colorDarkmode, maskLightByProgress, fullWidth, invert, id, }: LightBeamProps) => React.JSX.Element;
|
package/dist/index.js
CHANGED
|
@@ -23,18 +23,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
23
23
|
__setModuleDefault(result, mod);
|
|
24
24
|
return result;
|
|
25
25
|
};
|
|
26
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
27
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
28
|
+
};
|
|
26
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
27
30
|
exports.LightBeam = void 0;
|
|
28
31
|
const framer_motion_1 = require("framer-motion");
|
|
29
32
|
const react_1 = __importStar(require("react"));
|
|
33
|
+
const lightBeam_module_css_1 = __importDefault(require("./css/lightBeam.module.css"));
|
|
30
34
|
const useDarkmode_1 = require("./hooks/useDarkmode");
|
|
31
|
-
const LightBeam = ({ className, colorLightmode = "rgba(0,0,0, 0.5)", colorDarkmode = "rgba(255, 255, 255, 0.5)", fullWidth = 1.0, // Default to full width
|
|
32
|
-
}) => {
|
|
35
|
+
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
|
|
36
|
+
invert = false, id = undefined, }) => {
|
|
33
37
|
const elementRef = (0, react_1.useRef)(null);
|
|
34
38
|
const bodyRef = (0, react_1.useRef)(document.body);
|
|
35
39
|
const inViewProgress = (0, framer_motion_1.useMotionValue)(0);
|
|
36
40
|
const opacity = (0, framer_motion_1.useMotionValue)(0.839322);
|
|
37
41
|
const { isDarkmode } = (0, useDarkmode_1.useIsDarkmode)();
|
|
42
|
+
const chosenColor = isDarkmode ? colorDarkmode : colorLightmode;
|
|
38
43
|
(0, react_1.useEffect)(() => {
|
|
39
44
|
const handleScroll = () => {
|
|
40
45
|
if (elementRef.current) {
|
|
@@ -43,8 +48,11 @@ const LightBeam = ({ className, colorLightmode = "rgba(0,0,0, 0.5)", colorDarkmo
|
|
|
43
48
|
// Invert the fullWidth value: 1 becomes 0, and 0 becomes 1
|
|
44
49
|
const adjustedFullWidth = 1 - fullWidth;
|
|
45
50
|
// Calculate progress
|
|
46
|
-
const progress =
|
|
47
|
-
|
|
51
|
+
const progress = invert
|
|
52
|
+
? 0 +
|
|
53
|
+
Math.max(adjustedFullWidth, Math.min(1, rect.top / windowHeight))
|
|
54
|
+
: 1 -
|
|
55
|
+
Math.max(adjustedFullWidth, Math.min(1, rect.top / windowHeight));
|
|
48
56
|
// Update motion values
|
|
49
57
|
inViewProgress.set(progress);
|
|
50
58
|
opacity.set(0.839322 + (1 - 0.839322) * progress);
|
|
@@ -61,17 +69,21 @@ const LightBeam = ({ className, colorLightmode = "rgba(0,0,0, 0.5)", colorDarkmo
|
|
|
61
69
|
};
|
|
62
70
|
}, [inViewProgress, opacity]);
|
|
63
71
|
const backgroundPosition = (0, framer_motion_1.useTransform)(inViewProgress, [0, 1], [
|
|
64
|
-
|
|
65
|
-
|
|
72
|
+
`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`,
|
|
73
|
+
`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`,
|
|
74
|
+
]);
|
|
75
|
+
const maskImageOpacity = (0, framer_motion_1.useTransform)(inViewProgress, [0, 1], [
|
|
76
|
+
`linear-gradient(to bottom, ${chosenColor} 0%, transparent 50%)`,
|
|
77
|
+
`linear-gradient(to bottom, ${chosenColor} 0%, transparent 95%)`,
|
|
66
78
|
]);
|
|
79
|
+
const maskImage = maskLightByProgress
|
|
80
|
+
? maskImageOpacity
|
|
81
|
+
: `linear-gradient(to bottom, ${chosenColor} 25%, transparent 95%)`;
|
|
67
82
|
return (react_1.default.createElement(framer_motion_1.motion.div, { style: {
|
|
68
|
-
"--colorTop": `${isDarkmode ? colorDarkmode : colorLightmode}`,
|
|
69
83
|
background: backgroundPosition,
|
|
70
84
|
opacity: opacity,
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
maskImage: `linear-gradient(to bottom, background 0%, transparent 98%)`,
|
|
75
|
-
}, ref: elementRef, className: `Conic_conic__HBaxC ${className}` }));
|
|
85
|
+
maskImage: maskImage,
|
|
86
|
+
WebkitMaskImage: maskImage,
|
|
87
|
+
}, ref: elementRef, id: id, className: `lightBeam ${className} ${lightBeam_module_css_1.default.react__light__beam}` }));
|
|
76
88
|
};
|
|
77
89
|
exports.LightBeam = LightBeam;
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stianlarsen/react-light-beam",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
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
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"scripts": {
|
|
8
8
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
9
|
-
"build": "rm -rf dist && tsc"
|
|
9
|
+
"build": "rm -rf dist && tsc && shx mkdir -p dist/css/ && shx cp src/css/lightBeam.module.css dist/css/"
|
|
10
10
|
},
|
|
11
11
|
"files": [
|
|
12
12
|
"!src/**",
|
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@types/react": "^18",
|
|
47
47
|
"@types/react-dom": "^18",
|
|
48
|
+
"shx": "^0.3.4",
|
|
48
49
|
"typescript": "^5.5.4"
|
|
49
50
|
},
|
|
50
51
|
"dependencies": {
|