chore: update hooks documentation

Author: karl-run

README.md

@@ -1,13 +1,12 @@
 # react-bottom-scroll-listener [![NPM version](https://img.shields.io/npm/v/react-bottom-scroll-listener.svg?style=flat)](https://www.npmjs.com/package/react-bottom-scroll-listener) [![npm bundle size (minified)](https://img.shields.io/bundlephobia/minzip/react-bottom-scroll-listener.svg)](https://github.com/karl-run/react-bottom-scroll-listener)
 
-A simple React component that lets you listen for when you have scrolled to the bottom.
+A simple **React hook** and **React component** that lets you listen for when you have scrolled to the bottom.
 
 ### Window
 
 ![Example](./example.gif)
 
-
-### Container 
+### Container
 
 ![Example](./example_inner.gif)
 
@@ -21,25 +20,71 @@ yarn:
 
 ## Usage
 
-### On bottom of entire screen
+### Hook
 
-Simply have the BottomScrollListener anywhere in your application and pass it a function as `onBottom`-prop.
+[Full example](/example/src/HookExample.js)
+
+#### On bottom of entire screen
+
+Use the hook in any functional component, the callback will be invoked
+when the user scrolls to the bottom of the document
 
+```jsx
+import { useBottomScrollListener } from 'react-bottom-scroll-listener';
+
+useBottomScrollListener(callback);
 ```
+
+#### On bottom of specific container
+
+Use the hook in any functional component, use the ref given from the hook
+and pass it to the element you want to use as a scroll container
+
+The callback will be invoked when the user scrolls to the bottom of the container
+
+```jsx
+import { useBottomScrollListener } from 'react-bottom-scroll-listener';
+
+const containerRef = useBottomScrollListener(callback);
+
+<div ref={scrollRef}>Callback will be invoked when this container is scrolled to bottom.</div>
+```
+
+**Parameters**
+
+```
+useBottomScrollListener(
+   onBottom,       // Required callback that will be invoked when scrolled to bottom
+   offset = 0,     //  Offset from bottom of page in pixels. E.g. 300 will trigger onBottom 300px from the bottom of the page
+   debounce = 200, //  Optional debounce in milliseconds, defaults to 200ms
+) // returns React.MutableRefObject Optionally you can use this to pass to a element to use that as the scroll container
+```
+
+### Component
+
+[Full example](/example/src/ComponentExample.js)
+
+#### On bottom of entire screen
+
+Simply have the BottomScrollListener anywhere in your application and pass it a function as `onBottom`-prop.
+
+```jsx
+import BottomScrollListener from 'react-bottom-scroll-listener';
+
 <BottomScrollListener onBottom={callback} />
 ```
 
-### On bottom of specific container
+#### On bottom of specific container
 
 Pass the BottomScrollListener a function inside the JSX_tag, receive the `scrollRef` in this function from the BottomScrollListener
 and pass it to the component you want to listen for a scroll event on.
 
-```
+```jsx
+import BottomScrollListener from 'react-bottom-scroll-listener';
+
 <BottomScrollListener onBottom={callback}>
   {scrollRef => (
-    <div ref={scrollRef}>
-      Callback will be invoked when this container is scrolled to bottom.
-    </div>
+    <div ref={scrollRef}>Callback will be invoked when this container is scrolled to bottom.</div>
   )}
 </BottomScrollListener>
 ```

example/.eslintrc

@@ -37,7 +37,7 @@
     "lint": "eslint src --ext .ts,.tsx",
     "build": "rollup -c",
     "start": "rollup -c -w",
-    "prepublishOnly": "tsc && lint && yarn test",
+    "prepublishOnly": "tsc && yarn lint && yarn test",
     "prepare": "yarn run build",
     "predeploy": "cd example && yarn install && yarn run build",
     "deploy": "gh-pages -d example/build"
@@ -89,6 +89,6 @@
     "typescript": "^3.5.2"
   },
   "resolutions": {
-    "@types/react": "^16.8.19"
+    "@types/react": "^16.8.20"
   }
 }

package.json

@@ -42,7 +42,7 @@ describe('useBottomScrollListener', () => {
 
       window.dispatchEvent(new Event('scroll'))
 
-      expect(onBottom).toHaveBeenCalledTimes(0)
+      expect(onBottom).not.toHaveBeenCalled()
     })
 
     it('shall invoke onBottom when body is exactly at bottom', async () => {

src/hook/index.test.tsx

@@ -9,6 +9,14 @@ const createCallback = (debounce: number, handleOnScroll: () => void): (() => vo
   }
 }
 
+/**
+ *  A react hook that invokes a callback when user scrolls to the bottom
+ *
+ * @param onBottom Required callback that will be invoked when scrolled to bottom
+ * @param offset Offset from bottom of page in pixels. E.g. 300 will trigger onBottom 300px from the bottom of the page
+ * @param debounce Optional debounce in milliseconds, defaults to 200ms
+ * @return React.MutableRefObject Optionally you can use this to pass to a element to use that as the scroll container
+ */
 function useBottomScrollListener<T extends HTMLElement>(
   onBottom: () => void,
   offset: number = 0,
@@ -33,6 +41,8 @@ function useBottomScrollListener<T extends HTMLElement>(
         onBottom()
       }
     }
+    // ref dependency needed for the tests, doesn't matter for normal execution
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [offset, onBottom, containerRef.current])
 
   useEffect((): (() => void) => {

src/hook/index.tsx

@@ -272,15 +272,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.8.19":
-  version "16.8.19"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.19.tgz#629154ef05e2e1985cdde94477deefd823ad9be3"
-  integrity sha512-QzEzjrd1zFzY9cDlbIiFvdr+YUmefuuRYrPxmkwG0UQv5XF35gFIi7a95m1bNVcFU0VimxSZ5QVGSiBmlggQXQ==
-  dependencies:
-    "@types/prop-types" "*"
-    csstype "^2.2.0"
-
-"@types/react@^16.8.20":
+"@types/react@*", "@types/react@^16.8.20":
   version "16.8.20"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.20.tgz#4f633ecbd0a4d56d0ccc50fff6f9321bbcd7d583"
   integrity sha512-ZLmI+ubSJpfUIlQuULDDrdyuFQORBuGOvNnMue8HeA0GVrAJbWtZQhcBvnBPNRBI/GrfSfrKPFhthzC2SLEtLQ==