@stianlarsen/react-light-beam 1.0.0

package/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2024 Stian Larsen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,72 @@
+# @stianlarsen/react-light-beam
+
+[![npm version](https://badge.fury.io/js/%40stianlarsen%2Freact-light-beam.svg)](https://badge.fury.io/js/%40stianlarsen%2Freact-light-beam)
+
+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.
+
+## Installation
+
+```bash
+npm install @stianlarsen/react-light-beam
+```
+
+or
+
+```bash
+yarn add @stianlarsen/react-light-beam
+```
+
+## Usage
+
+```jsx
+import LightBeam from "@stianlarsen/react-light-beam";
+import "your-css-file.css"; // Include the necessary styles
+
+const App = () => {
+  return (
+    <div className="your-container-class">
+      <LightBeam
+        className="your-lightbeam-class"
+        colorDarkmode="hsl(var(--primary) / 1)"
+        colorLightmode="hsl(var(--foreground) / 0.2)"
+        fullWidth={0.8}
+      />
+      <YourContentHere />
+    </div>
+  );
+};
+
+export default App;
+```
+
+### Props
+
+| Prop Name        | Type     | Default Value              | Description                                                                                  |
+| ---------------- | -------- | -------------------------- | -------------------------------------------------------------------------------------------- |
+| `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. |
+
+### Customization
+
+You can customize the appearance and behavior of the light beam by adjusting the props or by applying additional styles via the `className` prop.
+
+### Dark Mode Support
+
+The component automatically adjusts between light and dark modes based on the user's system preferences. You can pass different colors for light and dark modes using the `colorLightmode` and `colorDarkmode` props.
+
+### Example
+
+```jsx
+<LightBeam
+  className="custom-lightbeam"
+  colorDarkmode="hsl(210, 22%, 18%)"
+  colorLightmode="hsl(0, 0%, 98%)"
+  fullWidth={0.5}
+/>
+```
+
+### License
+
+MIT © [Stian Larsen](https://github.com/stianlarsen)

package/dist/hooks/useDarkmode.d.ts

@@ -0,0 +1,3 @@
+export declare const useIsDarkmode: () => {
+    isDarkmode: boolean;
+};

package/dist/hooks/useDarkmode.js

@@ -0,0 +1,24 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsDarkmode = void 0;
+const react_1 = require("react");
+const useIsDarkmode = () => {
+    const [isDarkmode, setIsDarkmodeActive] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const matchMedia = window.matchMedia("(prefers-color-scheme: dark)");
+        const handleChange = () => {
+            setIsDarkmodeActive(matchMedia.matches);
+        };
+        // Set the initial value
+        setIsDarkmodeActive(matchMedia.matches);
+        // Listen for changes
+        matchMedia.addEventListener("change", handleChange);
+        // Cleanup listener on unmount
+        return () => {
+            matchMedia.removeEventListener("change", handleChange);
+        };
+    }, []);
+    return { isDarkmode };
+};
+exports.useIsDarkmode = useIsDarkmode;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { LightBeamProps } from "../types/types";
+export declare const LightBeam: ({ className, colorLightmode, colorDarkmode, fullWidth, }: LightBeamProps) => React.JSX.Element;
+export default LightBeam;

package/dist/index.js

@@ -0,0 +1,78 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LightBeam = void 0;
+const framer_motion_1 = require("framer-motion");
+const react_1 = __importStar(require("react"));
+const useDarkmode_1 = require("./hooks/useDarkmode");
+const LightBeam = ({ className, colorLightmode = "rgba(0,0,0, 0.5)", colorDarkmode = "rgba(255, 255, 255, 0.5)", fullWidth = 1.0, // Default to full width
+ }) => {
+    const elementRef = (0, react_1.useRef)(null);
+    const bodyRef = (0, react_1.useRef)(document.body);
+    const inViewProgress = (0, framer_motion_1.useMotionValue)(0);
+    const opacity = (0, framer_motion_1.useMotionValue)(0.839322);
+    const { isDarkmode } = (0, useDarkmode_1.useIsDarkmode)();
+    (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 = 1 - Math.max(adjustedFullWidth, Math.min(1, rect.top / windowHeight));
+                console.log("progress: ", progress);
+                // 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]);
+    const backgroundPosition = (0, framer_motion_1.useTransform)(inViewProgress, [0, 1], [
+        "conic-gradient(from 90deg at 90% 0%, var(--colorTop), transparent 180deg) 0% 0% / 50% 150% no-repeat, conic-gradient(from 270deg at 10% 0%, transparent 180deg, var(--colorTop)) 100% 0% / 50% 100% no-repeat",
+        "conic-gradient(from 90deg at 0% 0%, var(--colorTop), transparent 180deg) 0% 0% / 50% 100% no-repeat, conic-gradient(from 270deg at 100% 0%, transparent 180deg, var(--colorTop)) 100% 0% / 50% 100% no-repeat",
+    ]);
+    return (react_1.default.createElement(framer_motion_1.motion.div, { style: {
+            "--colorTop": `${isDarkmode ? colorDarkmode : colorLightmode}`,
+            background: backgroundPosition,
+            opacity: opacity,
+            height: "100%",
+            transition: "background 0.5s ease, opacity 0.5s ease",
+            zIndex: -1,
+            maskImage: `linear-gradient(to bottom, background 0%,  transparent 98%)`,
+        }, ref: elementRef, className: `Conic_conic__HBaxC ${className}` }));
+};
+exports.LightBeam = LightBeam;
+exports.default = exports.LightBeam;

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@stianlarsen/react-light-beam",
+  "version": "1.0.0",
+  "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",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "rm -rf dist && tsc"
+  },
+  "files": [
+    "!src/**",
+    "dist",
+    "types"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stianalars1/react-light-beam.git"
+  },
+  "keywords": [
+    "react",
+    "light beam",
+    "conic gradient",
+    "dark mode",
+    "framer-motion",
+    "animation"
+  ],
+  "author": "Stian Larsen <stian.larsen@mac.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/stianalars1/react-light-beam/issues"
+  },
+  "homepage": "https://github.com/stianalars1/react-light-beam#readme",
+  "peerDependencies": {
+    "framer-motion": "^11.3.30",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "typescript": "^5.5.4"
+  },
+  "dependencies": {
+    "framer-motion": "^11.3.30",
+    "react": "^18",
+    "react-dom": "^18"
+  }
+}

package/types/types.d.ts

@@ -0,0 +1,6 @@
+export type LightBeamProps = {
+  className?: string;
+  fullWidth?: number;
+  colorLightmode?: string;
+  colorDarkmode?: string;
+};