Fix blocking overlay

.changeset/brown-birds-judge.md

@@ -0,0 +1,5 @@
+---
+"react-mouse-trails": patch
+---
+
+No need to import styles. Fix blocking overlay

README.md

@@ -36,24 +36,6 @@ $ npm install react-mouse-trails
 $ yarn add react-mouse-trails
 ```
 
-### Adding CSS
-
-You can import CSS in your global styles or from your component. In the case of Next.js, you can import global styles only in `layout` or `_app` components.
-
-In your stylesheet
-
-```css
-@import "react-mouse-trails/dist";
-```
-
-or in your component
-
-```ts
-import "react-mouse-trail/dist/index.css";
-```
-
-Here's a revised version of the usage section:
-
 ## Usage
 
 MouseTrail is simple to integrate:

lib/package.json

@@ -16,7 +16,7 @@
     "dist/**"
   ],
   "scripts": {
-    "build": "tsup && tsc -p tsconfig-build.json",
+    "build": "tsup && tsc -p tsconfig-build.json && touch dist/index.css",
     "clean": "rm -rf dist",
     "dev": "tsup --watch && tsc -p tsconfig-build.json -w",
     "typecheck": "tsc --noEmit",

lib/src/client/mouse-trail/mouse-trail.tsx

@@ -1,5 +1,6 @@
-import { HTMLProps, useEffect, useRef } from "react";
-import styles from "./mouse-trail.module.scss";
+/* eslint-disable react/function-component-definition -- for better minification*/
+
+import { type HTMLProps, useEffect, useRef } from "react";
 import { trails } from "../../utils";
 
 export interface MouseTrailProps extends HTMLProps<HTMLCanvasElement> {
@@ -13,25 +14,34 @@ export interface MouseTrailProps extends HTMLProps<HTMLCanvasElement> {
  * <MouseTrail />
  * ```
  */
-export const MouseTrail = ({ className, rgb, ...props }: MouseTrailProps) => {
+export const MouseTrail = ({ rgb, ...props }: MouseTrailProps): JSX.Element => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   useEffect(() => {
     const canvas = canvasRef.current;
     const gl = canvas?.getContext("webgl");
     if (!gl || !canvas) return;
-    const onResize = () => {
+    const onResize = (): void => {
       canvas.width = innerWidth;
       canvas.height = innerHeight;
+      // canvas.style.width = `${innerWidth}px`;
+      // canvas.style.height = `${innerHeight}px`;
       gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
     };
     onResize();
-    trails(canvas, gl, rgb);
+    trails(gl, rgb);
     addEventListener("resize", onResize);
     // skipcq: JS-0045
     return () => {
       removeEventListener("resize", onResize);
     };
-  }, []);
-  const cls = [styles.trail, className ?? ""].join(" ");
-  return <canvas {...props} className={cls} data-testid="mouse-trail" ref={canvasRef} />;
+  }, [rgb]);
+
+  return (
+    <canvas
+      style={{ pointerEvents: "none", position: "fixed", top: 0, left: 0 }}
+      {...props}
+      data-testid="mouse-trail"
+      ref={canvasRef}
+    />
+  );
 };

lib/src/utils.ts

@@ -18,11 +18,7 @@ const fragmentShaderSource = (rgb = [1, 0, 0]) => `
 `;
 
 /** Setup trails */
-export const trails = (
-  canvas: HTMLCanvasElement,
-  gl: WebGLRenderingContext,
-  rgb?: [number, number, number],
-) => {
+export const trails = (gl: WebGLRenderingContext, rgb?: [number, number, number]) => {
   gl.enable(gl.BLEND);
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
 
@@ -85,7 +81,7 @@ export const trails = (
   let fades: number[] = [];
 
   /** The render loop */
-  const render = () => {
+  const render = (): void => {
     runningAnim = true;
     fades = fades.map(fade => fade / 1.1);
     positions = positions.filter((_, index) => fades[index] > 0.001);
@@ -106,9 +102,9 @@ export const trails = (
   };
   gl.clearColor(0.0, 0.0, 0.0, 0.0);
 
-  canvas.addEventListener("mousemove", (event: MouseEvent) => {
-    const x = (event.clientX / canvas.width) * 2 - 1;
-    const y = (event.clientY / canvas.height) * -2 + 1;
+  addEventListener("mousemove", (event: MouseEvent) => {
+    const x = (event.clientX / innerWidth) * 2 - 1;
+    const y = (event.clientY / innerHeight) * -2 + 1;
 
     positions.unshift(x, y);
     fades.unshift(1);