rocket-cursor-component 1.0.7 → 1.0.9

package/README.md

@@ -44,6 +44,7 @@ export default App;
 - **Rotation**: The rocket rotates in the direction of the cursor movement.
 - **Flame Effect**: The rocket displays a flame animation when the cursor is moving.
 - **Customizable**: Easily adjust the size, rotation threshold, and visibility of the rocket.
+- **Element-Specific Visibility**: Automatically hides the rocket cursor over elements with the class `no-rocket-cursor`.
 
 ## Demo
 
@@ -53,6 +54,10 @@ Here’s a demo of the Rocket Cursor in action:
 
 ## Changelog
 
+### 1.0.9
+
+- Added support to hide the Rocket Cursor on elements with the class `no-rocket-cursor`.
+
 ### 1.0.2
 
 - Added demo GIF in the README file.

package/dist/rocket.Cursor.js

@@ -8,6 +8,12 @@ const RocketCursor = ({ size = 50, threshold = 10, isVisible = true, }) => {
     const lastSignificantPosition = useRef({ x: 0, y: 0 });
     const lastMoveTimestamp = useRef(Date.now());
     const handleMouseMove = useCallback((e) => {
+        const target = e.target;
+        // hide rocket cursor if there is class "no-rocket-cursor"
+        if (target.closest(".no-rocket-cursor")) {
+            setVisible(false);
+            return;
+        }
         const currentPosition = { x: e.clientX, y: e.clientY };
         setPosition(currentPosition);
         const dx = currentPosition.x - lastSignificantPosition.current.x;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rocket-cursor-component",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "A customizable React component that replaces the cursor with an animated rocket.",
   "main": "dist/rocket.Cursor.js",
   "types": "dist/rocket.Cursor.d.ts",

package/src/rocket.Cursor.tsx

@@ -20,7 +20,14 @@ const RocketCursor: React.FC<RocketCursorProps> = ({
   const lastMoveTimestamp = useRef(Date.now());
 
   const handleMouseMove = useCallback(
-    (e: { clientX: any; clientY: any }) => {
+    (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      // hide rocket cursor if there is class "no-rocket-cursor"
+      if (target.closest(".no-rocket-cursor")) {
+        setVisible(false);
+        return;
+      }
+
       const currentPosition = { x: e.clientX, y: e.clientY };
       setPosition(currentPosition);