Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@stianlarsen/react-light-beam
Advanced tools
@stianlarsen/react-light-beam - npm Package Compare versions
Comparing version 1.0.9 to 1.0.10
| import React from "react"; | ||
| import { LightBeamProps } from "../types/types"; | ||
| export declare const LightBeam: ({ className, colorLightmode, colorDarkmode, maskLightByProgress, fullWidth, invert, id, onLoaded, }: LightBeamProps) => React.JSX.Element; | ||
| export declare const LightBeam: ({ className, colorLightmode, colorDarkmode, maskLightByProgress, fullWidth, invert, id, onLoaded, scrollElement, }: LightBeamProps) => React.JSX.Element; |
@@ -36,5 +36,5 @@ "use strict"; | ||
| 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, onLoaded = undefined, }) => { | ||
| invert = false, id = undefined, onLoaded = undefined, scrollElement, // Add this line | ||
| }) => { | ||
| const elementRef = (0, react_1.useRef)(null); | ||
| const [bodyElement, setBodyElement] = (0, react_1.useState)(null); // State to hold the body element | ||
| const inViewProgress = (0, framer_motion_1.useMotionValue)(0); | ||
@@ -45,8 +45,6 @@ const opacity = (0, framer_motion_1.useMotionValue)(0.839322); | ||
| (0, react_1.useEffect)(() => { | ||
| // Set the body element after the component mounts | ||
| setBodyElement(document.body); | ||
| onLoaded && onLoaded(); | ||
| }, []); | ||
| (0, react_1.useEffect)(() => { | ||
| if (bodyElement && typeof window !== "undefined") { | ||
| if (typeof window !== "undefined") { | ||
| const handleScroll = () => { | ||
@@ -69,5 +67,5 @@ if (elementRef.current) { | ||
| }; | ||
| // Attach scroll and resize event listeners | ||
| const handleScrollThrottled = throttle(handleScroll); // Approx 60fps | ||
| bodyElement.addEventListener("scroll", handleScrollThrottled); | ||
| const target = scrollElement || window; | ||
| target.addEventListener("scroll", handleScrollThrottled); | ||
| window.addEventListener("resize", handleScrollThrottled); | ||
@@ -77,7 +75,7 @@ // Initial call to handleScroll to set initial state | ||
| return () => { | ||
| bodyElement.removeEventListener("scroll", handleScrollThrottled); | ||
| target.removeEventListener("scroll", handleScrollThrottled); | ||
| window.removeEventListener("resize", handleScrollThrottled); | ||
| }; | ||
| } | ||
| }, [bodyElement, inViewProgress, opacity]); | ||
| }, [inViewProgress, opacity, scrollElement]); | ||
| const backgroundPosition = (0, framer_motion_1.useTransform)(inViewProgress, [0, 1], [ | ||
@@ -84,0 +82,0 @@ `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`, |
| { | ||
| "name": "@stianlarsen/react-light-beam", | ||
| "version": "1.0.9", | ||
| "version": "1.0.10", | ||
| "description": "A customizable React component that creates a light beam effect using conic gradients. Supports dark mode and various customization options.", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
| # @stianlarsen/react-light-beam | ||
| ## 🚀 New Feature Alert! | ||
| We've added a new prop: `scrollElement`. This allows you to specify which element should have the scroll listener attached, giving you greater flexibility in using the LightBeam component! | ||
| [](https://badge.fury.io/js/%40stianlarsen%2Freact-light-beam) | ||
@@ -42,2 +46,3 @@ | ||
| invert={false} | ||
| scrollElement={window} // New prop to specify scroll element | ||
| /> | ||
@@ -54,12 +59,13 @@ <YourContentHere /> | ||
| | Prop Name | Type | Default Value | Description | | ||
| | --------------------- | ------------------------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `id` | `string` | `undefined` | Optional string representing a unique ID for the LightBeam container. | | ||
| | `className` | `string` | `undefined` | Optional string representing custom classes to be added to the LightBeam container. | | ||
| | `colorLightmode` | `string` | `rgba(0,0,0, 0.5)` | Optional string representing the color of the light beam in light mode. | | ||
| | `colorDarkmode` | `string` | `rgba(255, 255, 255, 0.5)` | Optional string representing the color of the light beam in dark mode. | | ||
| | `fullWidth` | `number` | `1.0` | Optional number between `0` and `1` representing the maximum width the light beam can reach. | | ||
| | `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%)`. | | ||
| | `invert` | `boolean` | `false` | Optional boolean to invert the scroll progress calculation. | | ||
| | `onLoaded` | `undefined or () => void` | `undefined` | Optional function to run when the component has mounted | | ||
| | Prop Name | Type | Default Value | Description | | ||
| | --------------------- | ---------------------------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `id` | `string` | `undefined` | Optional string representing a unique ID for the LightBeam container. | | ||
| | `className` | `string` | `undefined` | Optional string representing custom classes to be added to the LightBeam container. | | ||
| | `colorLightmode` | `string` | `rgba(0,0,0, 0.5)` | Optional string representing the color of the light beam in light mode. | | ||
| | `colorDarkmode` | `string` | `rgba(255, 255, 255, 0.5)` | Optional string representing the color of the light beam in dark mode. | | ||
| | `fullWidth` | `number` | `1.0` | Optional number between `0` and `1` representing the maximum width the light beam can reach. | | ||
| | `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%)`. | | ||
| | `invert` | `boolean` | `false` | Optional boolean to invert the scroll progress calculation. | | ||
| | `scrollElement` | `EventTarget` or `undefined` | `window` | Optional prop for which element to attach the scroll listener to. This could be the `window`, `document.body`, or any other scrollable element. | | ||
| | `onLoaded` | `undefined or () => void` | `undefined` | Optional function to run when the component has mounted | | ||
@@ -126,2 +132,3 @@ ### Default Configuration | ||
| invert={true} | ||
| scrollElement={document.body} // Example usage of the new scrollElement prop | ||
| /> | ||
@@ -128,0 +135,0 @@ ``` |
@@ -9,3 +9,4 @@ export type LightBeamProps = { | ||
| id?: string; | ||
| scrollElement?: EventTarget; | ||
| onLoaded?: () => void; | ||
| }; |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by3.87%
17905
- Number of lines in readme file
- increased by5.38%
137
Worsened metrics
- Number of downloads
- decreased by-33.33%
2
- Lines of code
- decreased by-0.6%
167
No dependency changes