From 5b39ab5d24d9ecfbbfbd3f45abacd7a5015bdb18 Mon Sep 17 00:00:00 2001
From: Ward Oosterlijnck <wardoosterlijnck@gmail.com>
Date: Sat, 6 Apr 2019 15:31:48 +1100
Subject: [PATCH] Type checking + minor improvements useScroll

---
 docs/useScroll.md                   | 14 +++++++++----
 src/__stories__/useScroll.story.tsx | 10 ++++-----
 src/useScroll.ts                    | 32 ++++++++++++++++++-----------
 3 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/docs/useScroll.md b/docs/useScroll.md
index 6de5730795..0139b3dcd3 100644
--- a/docs/useScroll.md
+++ b/docs/useScroll.md
@@ -1,6 +1,6 @@
 # `useScroll`
 
-React sensor hook that re-renders on when scroll position in a DOM element changes.
+React sensor hook that re-renders when the scroll position in a DOM element changes.
 
 ## Usage
 
@@ -8,14 +8,20 @@ React sensor hook that re-renders on when scroll position in a DOM element chang
 import {useScroll} from 'react-use';
 
 const Demo = () => {
-  const element = React.useRef(null);
-  const {x, y} = useScroll(element);
+  const scrollRef = React.useRef(null);
+  const {x, y} = useScroll(scrollRef);
 
   return (
-    <div ref={element}>
+    <div ref={scrollRef}>
       <div>x: {x}</div>
       <div>y: {y}</div>
     </div>
   );
 };
 ```
+
+## Reference
+
+```ts
+useScroll(ref: RefObject<HTMLElement>);
+```
diff --git a/src/__stories__/useScroll.story.tsx b/src/__stories__/useScroll.story.tsx
index 11ba223461..5d3b71117b 100644
--- a/src/__stories__/useScroll.story.tsx
+++ b/src/__stories__/useScroll.story.tsx
@@ -4,15 +4,15 @@ import {useScroll} from '..';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
-  const element = React.useRef(null);
-  const {x, y} = useScroll(element);
+  const scrollRef = React.useRef(null);
+  const {x, y} = useScroll(scrollRef);
 
   return (
     <>
       <div>x: {x}</div>
       <div>y: {y}</div>
       <div
-        ref={element}
+        ref={scrollRef}
         style={{
           width: '400px',
           height: '400px',
@@ -30,6 +30,4 @@ const Demo = () => {
 
 storiesOf('Sensors/useScroll', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useScroll.md')} />)
-  .add('Demo', () =>
-    <Demo/>
-  )
+  .add('Demo', () => <Demo/>)
diff --git a/src/useScroll.ts b/src/useScroll.ts
index fffb0f44be..7f1c4f15b9 100644
--- a/src/useScroll.ts
+++ b/src/useScroll.ts
@@ -1,30 +1,38 @@
-import {useState, useEffect, useRef} from 'react';
-import {isClient} from './util';
+import {useState, useEffect, useRef, RefObject} from 'react';
 
 export interface State {
   x: number;
   y: number;
 }
 
-const useScroll = (ref): State => {
+const useScroll = (ref: RefObject<HTMLElement>): State => {
+  if (process.env.NODE_ENV === 'development') {
+    if ((typeof ref !== 'object') || (typeof ref.current === 'undefined')) {
+      console.error('`useScroll` expects a single ref argument.');
+    }
+  }
+
   const frame = useRef(0);
   const [state, setState] = useState<State>({
-    x: isClient ? window.scrollX : 0,
-    y: isClient ? window.scrollY : 0
+    x: 0,
+    y: 0
   });
 
   useEffect(() => {
     const handler = () => {
       cancelAnimationFrame(frame.current)
+
       frame.current = requestAnimationFrame(() => {
-        setState({
-          x: ref.current.scrollLeft,
-          y: ref.current.scrollTop
-        });
+        if (ref.current) {
+          setState({
+            x: ref.current.scrollLeft,
+            y: ref.current.scrollTop
+          })
+        }
       });
     }
 
-    if (ref && ref.current) {
+    if (ref.current) {
       ref.current.addEventListener('scroll', handler, {
         capture: false,
         passive: true
@@ -36,11 +44,11 @@ const useScroll = (ref): State => {
         cancelAnimationFrame(frame.current);
       }
 
-      if (ref && ref.current) {
+      if (ref.current) {
         ref.current.removeEventListener('scroll', handler);
       }
     };
-  }, [ref]);
+  }, [ref.current]);
 
   return state;
 }