diff --git a/README.md b/README.md index ca7310510f..bbe79b978c 100644 --- a/README.md +++ b/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. diff --git a/docs/useMouseWheel.md b/docs/useMouseWheel.md new file mode 100644 index 0000000000..dd22a8fd44 --- /dev/null +++ b/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 ( + <> +

delta Y Scrolled: {mouseWheel}

+ + ); +}; +``` diff --git a/src/index.ts b/src/index.ts index 8ef300d56e..0742b5fb61 100644 --- a/src/index.ts +++ b/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'; diff --git a/src/useMouseWheel.ts b/src/useMouseWheel.ts new file mode 100644 index 0000000000..f8793e05fc --- /dev/null +++ b/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 +} + diff --git a/stories/useMouseWheel.story.tsx b/stories/useMouseWheel.story.tsx new file mode 100644 index 0000000000..7a6c0989a3 --- /dev/null +++ b/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 = () => { + const mouseWheel = useMouseWheel() + return ( + <> +

delta Y Scrolled: {mouseWheel}

+ + ); +}; + +storiesOf('Sensors|useMouseWheel', module) + .add('Docs', () => ) + .add('Demo', () => );