🖱 Added useMousePointer hook (#24)

README.md

@@ -50,6 +50,7 @@ yarn add use-custom-hooks
 - [useDebounce](#-usedebounce)
 - [useDarkMode](#-usedarkmode)
 - [useToggle](#-usetoggle)
+- [useMousePosition](#-usemousepointer)
 - [useGeoLocation](#-usegeolocation)
 
 ## 💾 useLocalStorage
@@ -161,6 +162,32 @@ const Mood = () =>{
 }
 ```
 
+## 🖱 useMousePosition
+Returns an object with the current coordinates of the mouse pointer.
+
+### Usage
+
+```jsx
+import React from "react"
+import { useMousePointer } from "use-custom-hooks"
+
+const Mouse = () =>{
+  const {x,y} = useMousePosition();
+  /*
+    Using Object destructuring to get x & y coordinates
+    from mousePosition object.
+  */
+
+  return(
+   <div>
+    <h1>Mouse Pointer Location</div>
+    <p>The mouse pointer is at : {`(${x},${y})`}</p>
+    {/* The x,y coordinates will be updated as you move your mouse.*/}
+   </div>
+  );
+}
+```
+
 ## 🌎 useGeoLocation
 Get latitude and longitude positions from your browser
 

hooks/useMousePosition.js

@@ -0,0 +1,32 @@
+import { useState, useEffect } from "react";
+
+/**
+ * @typedef {Object} MousePosition
+ * @property {number} x - X Coordinate of the mouse
+ * @property {number} y - Y Coordinate of the mouse.
+ */
+
+/**
+ *
+ * Custom hook which return an object with current coordinates of mouse pointer.
+ * @return {MousePosition} Object containing the coordinates of the mouse pointer.
+ */
+const useMousePosition = () => {
+  const [coordinates, setCoordinates] = useState({});
+
+  useEffect(() => {
+    //Event listener to track the mouse location.
+    window.addEventListener("mousemove", (e) => {
+      const mousePosition = {
+        x: e.clientX,
+        y: e.clientY,
+      };
+
+      setCoordinates(mousePosition);
+    });
+  }, []);
+
+  return coordinates;
+};
+
+export default useMousePosition;

index.js

@@ -3,3 +3,4 @@ export { default as useDarkMode } from "./hooks/useDarkMode";
 export { default as useDebounce } from "./hooks/useDebounce";
 export { default as useGeoLocation } from "./hooks/useGeoLocation";
 export { default as useLocalStorage } from "./hooks/useLocalStorage";
+export { default as useMousePosition } from "./hooks/useMousePosition";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-custom-hooks",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "A collection of Custom Hooks for React.",
   "main": "index.js",
   "scripts": {},