feat: add useMousePosition #21

novajslabs · Dec 24, 2024 · 1547a86 · 1547a86
1 parent 0958bdd
commit 1547a86
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 0 deletions.
diff --git a/snippets/js.code-snippets b/snippets/js.code-snippets
@@ -926,6 +926,38 @@
     ],
     "description": "React hook to store, retrieve and delete data from the browser's localStorage API"
   },
+  "useMousePosition": {
+    "prefix": "useMousePosition",
+    "body": [
+      "import { useSyncExternalStore } from 'react';",
+      "",
+      "let mousePosition = { x: 0, y: 0 };",
+      "",
+      "export const useMousePosition = () => {",
+      "  const subscribe = (callback) => {",
+      "    const handleMouseMove = (event) => {",
+      "      mousePosition = {",
+      "        x: event.clientX,",
+      "        y: event.clientY",
+      "      };",
+      "      callback();",
+      "    };",
+      "",
+      "    window.addEventListener('mousemove', handleMouseMove);",
+      "    return () => {",
+      "      window.removeEventListener('mousemove', handleMouseMove);",
+      "    };",
+      "  };",
+      "",
+      "  const getSnapshot = () => mousePosition;",
+      "",
+      "  const getServerSnapshot = () => ({ x: 0, y: 0 });",
+      "",
+      "  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);",
+      "};"
+    ],
+    "description": "React hook to track the current position of the mouse on the screen"
+  },
   "useNavigatorShare": {
     "prefix": "useNavigatorShare",
     "body": [

diff --git a/snippets/ts.code-snippets b/snippets/ts.code-snippets
@@ -1001,6 +1001,43 @@
     ],
     "description": "React hook to store, retrieve and delete data from the browser's localStorage API"
   },
+  "useMousePosition": {
+    "prefix": "useMousePosition",
+    "body": [
+      "import { useSyncExternalStore } from 'react';",
+      "",
+      "interface MousePosition {",
+      "  x: number;",
+      "  y: number;",
+      "}",
+      "",
+      "let mousePosition: MousePosition = { x: 0, y: 0 };",
+      "",
+      "export const useMousePosition = (): MousePosition => {",
+      "  const subscribe = (callback: () => void) => {",
+      "    const handleMouseMove = (event: MouseEvent) => {",
+      "      mousePosition = {",
+      "        x: event.clientX,",
+      "        y: event.clientY",
+      "      };",
+      "      callback();",
+      "    };",
+      "",
+      "    window.addEventListener('mousemove', handleMouseMove);",
+      "    return () => {",
+      "      window.removeEventListener('mousemove', handleMouseMove);",
+      "    };",
+      "  };",
+      "",
+      "  const getSnapshot = (): MousePosition => mousePosition;",
+      "",
+      "  const getServerSnapshot = (): MousePosition => ({ x: 0, y: 0 });",
+      "",
+      "  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);",
+      "};"
+    ],
+    "description": "React hook to track the current position of the mouse on the screen"
+  },
   "useNavigatorShare": {
     "prefix": "useNavigatorShare",
     "body": [