feat: add useMouseWheel hook

Author: tkwant

README.md

@@ -57,6 +57,7 @@
   - [`useMediaDevices`](./docs/useMediaDevices.md) — tracks state of connected hardware devices.
   - [`useMotion`](./docs/useMotion.md) — tracks state of device's motion sensor.
   - [`useMouse` and `useMouseHovered`](./docs/useMouse.md) — tracks state of mouse position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemouse--docs)
+  - [`useMouseWheel`](./docs/useMouse.md) — tracks deltaY of scrolled mouse wheel. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemousewheel--docs)
   - [`useNetwork`](./docs/useNetwork.md) — tracks state of user's internet connection.
   - [`useOrientation`](./docs/useOrientation.md) — tracks state of device's screen orientation.
   - [`usePageLeave`](./docs/usePageLeave.md) — triggers when mouse leaves page boundaries.

docs/useMouseWheel.md

@@ -0,0 +1,17 @@
+# `useMouseWheel` 
+React Hook to get deltaY of mouse scrolled in window. 
+
+## Usage
+
+```jsx
+import { useMouseWheel } from 'react-use';
+
+const Demo = () => {
+  const mouseWheel = useMouseWheel()
+  return (
+    <>
+      <h3>delta Y Scrolled: {mouseWheel}</h3>
+    </>
+  );
+};
+```

src/index.ts

@@ -60,6 +60,7 @@ export { default as useMount } from './useMount';
 export { default as useMountedState } from './useMountedState';
 export { default as useMouse } from './useMouse';
 export { default as useMouseHovered } from './useMouseHovered';
+export { default as useMouseWheel } from './useMouseWheel';
 export { default as useNetwork } from './useNetwork';
 export { default as useNumber } from './useNumber';
 export { default as useObservable } from './useObservable';

src/useMouseWheel.ts

@@ -0,0 +1,14 @@
+import {useEffect, useState} from 'react'
+
+export default () => {
+    const [mouseWheelScrolled, setMouseWheelScrolled] = useState(0)
+    useEffect(()=>{
+        const updateScroll = (e : MouseWheelEvent) => {
+            setMouseWheelScrolled(e.deltaY + mouseWheelScrolled)
+        }
+        window.addEventListener('wheel', updateScroll, false)
+        return () => window.removeEventListener('wheel', updateScroll)
+    })
+    return mouseWheelScrolled
+}
+

stories/useMouseWheel.story.tsx

@@ -0,0 +1,17 @@
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import { useMouseWheel } from '../src';
+import ShowDocs from './util/ShowDocs';
+
+const Demo: React.FC<any> = () => {
+  const mouseWheel = useMouseWheel()
+  return (
+    <>
+      <h3>delta Y Scrolled: {mouseWheel}</h3>
+    </>
+  );
+};
+
+storiesOf('Sensors|useMouseWheel', module)
+  .add('Docs', () => <ShowDocs md={require('../docs/useMouseWheel.md')} />)
+  .add('Demo', () => <Demo />);