[Feature] useMouseMove hook to observe x,y coords of window or an html element

dev/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { useWindowSize, useFormField, useTitle, useHover } from '../src';
+import { useWindowSize, useFormField, useTitle, useHover, useMouseMove } from '../src';
 
 const PADDING = 15;
 const MARGIN = 15;
@@ -80,18 +80,26 @@ const myStyles = theme => {
     hoverSectionActive: {
       backgroundColor: selectedColor.hoverDark,
     },
+    miniBox: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      backgroundColor: selectedColor.hoverLight,
+    },
   };
 };
 
 const App = () => {
   const size = useWindowSize();
   const titleInput = useFormField('Melting Pot');
   const hoverEl = useHover();
+  const mouseCoords = useMouseMove();
+  const yellowBoxCoords = useMouseMove();
   useTitle(titleInput.value || 'Empty');
 
   const styles = myStyles('superman');
   return (
-    <div style={styles.wrapper}>
+    <div style={styles.wrapper} {...mouseCoords.bind}>
       <aside style={styles.sidebar}>
         <h2 style={styles.heading}>Meltin Pot</h2>
       </aside>
@@ -102,6 +110,17 @@ const App = () => {
           window is {size.height}px. Try resizing the window horizontally/vertically & see the
           values of width & height change.
         </p>
+        <h2>Mouse Coordinates</h2>
+        <p>
+          Did you know your mouse coordinates are w.r.t screen are x: {mouseCoords.x} and y:{' '}
+          {mouseCoords.y}
+        </p>
+        <section {...yellowBoxCoords.bind} style={styles.miniBox}>
+          {/* <section ref={yellowBoxRef} style={styles.miniBox}> */}
+          <p>
+            mouse x,y with respect to blue box {yellowBoxCoords.x}, {yellowBoxCoords.y}
+          </p>
+        </section>
         <h2 style={styles.heading}>Fun!</h2>
         <p style={styles.paragraph}>
           Try changing the title of the input field below & watch as the title of the browser window

docs/hooks/useMouseMove.mdx

@@ -0,0 +1,44 @@
+---
+name: useMouseMove
+menu: Hooks
+---
+
+import { Playground } from 'docz';
+import { useMouseMove } from '@withvoid/melting-pot';
+
+# useMouseMove
+
+## Purpose
+
+A hook utility to get current mouse pointer coordinates on screen.
+
+## Usage
+
+```
+import { useMouseMove } from '@withvoid/melting-pot';
+```
+
+## Syntax
+```
+const { mouseCoordinates, bind} = useMouseMove();
+
+x: {mouseCoordinates.x}
+y: {mouseCoordinates.y}
+```
+
+## Examples
+
+<Playground>
+  {() => {
+    const mosueCoords = useMouseMove();
+
+    return (
+      <div {...mosueCoords.bind}>
+        <h4>Did you know?</h4>
+        <p>Your mouse pointer coordinates are x: {mosueCoords.x} and y: {mosueCoords.y}</p>
+      </div>
+    )
+
+}}
+
+</Playground>

src/hooks/useMouseMove.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const useMouseMove = () => {
+  const [coords, setCoords] = React.useState({ x: 0, y: 0 });
+
+  return {
+    ...coords,
+    bind: {
+      onMouseMove: event => {
+        setCoords({ x: event.screenX, y: event.screenY });
+      },
+    },
+  };
+};
+
+export default useMouseMove;

src/index.js

@@ -11,6 +11,7 @@ export { default as useWindowScrollPosition } from './hooks/useWindowScrollPosit
 export { default as useTitle } from './hooks/useTitle';
 export { default as useToggle } from './hooks/useToggle';
 export { default as useUpdate } from './hooks/useUpdate';
+export { default as useMouseMove } from './hooks/useMouseMove';
 
 // Higher Order Components
 export { default as withCompose } from './hoc/withCompose';