refactor hook to use options object instead of function parameters

Author: karl-run

.eslintrc

@@ -1,11 +1,11 @@
 {
   "parser": "@typescript-eslint/parser",
   "extends": [
-    "standard",
-    "standard-react",
-    "plugin:prettier/recommended",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
     "prettier/standard",
     "prettier/react",
+    "plugin:prettier/recommended",
     "plugin:@typescript-eslint/eslint-recommended"
   ],
   "env": {

.github/workflows/main.yml

@@ -0,0 +1,17 @@
+name: CI
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: yarn
+      - run: yarn test
+      - uses: devmasx/[email protected]
+        with:
+          type: lcov
+          result_path: coverage/lcov.info
+          min_coverage: 1
+          token: ${{secrets.GITHUB_TOKEN}}

.gitignore

@@ -8,6 +8,7 @@ node_modules
 build
 dist
 .rpt2_cache
+.eslintcache
 
 # misc
 .DS_Store

.prettierrc

@@ -1,5 +1,4 @@
 {
-  "semi": false,
   "tabWidth": 2,
   "trailingComma": "all",
   "singleQuote": true,

example/src/App.js

@@ -1,12 +1,12 @@
-import React, { useState } from 'react'
-import Toggle from 'react-toggle'
+import React, { useState } from 'react';
+import Toggle from 'react-toggle';
 
-import ComponentExample from './ComponentExample'
-import HookExample from './HookExample'
+import ComponentExample from './ComponentExample';
+import HookExample from './HookExample';
 
 const App = () => {
-  const [hookExample, setHookExample] = useState(true)
-  const [alertOnBottom, setAlertOnBottom] = useState(true)
+  const [hookExample, setHookExample] = useState(true);
+  const [alertOnBottom, setAlertOnBottom] = useState(true);
 
   return (
     <div>
@@ -15,17 +15,17 @@ const App = () => {
         <div className="right-toggle-box">
           <label htmlFor="alert-state">
             <span>Use {alertOnBottom ? 'alert dialog' : 'console.log'}</span>
-            <Toggle id="alert-state" checked={alertOnBottom} onChange={() => setAlertOnBottom(b => !b)} />
+            <Toggle id="alert-state" checked={alertOnBottom} onChange={() => setAlertOnBottom((b) => !b)} />
           </label>
           <label htmlFor="use-hook-state">
             <span>Use {hookExample ? 'hook' : 'component'}</span>
-            <Toggle id="use-hook-state" checked={hookExample} onChange={() => setHookExample(b => !b)} />
+            <Toggle id="use-hook-state" checked={hookExample} onChange={() => setHookExample((b) => !b)} />
           </label>
         </div>
       </header>
       {hookExample ? <HookExample alertOnBottom={alertOnBottom} /> : <ComponentExample alertOnBottom={alertOnBottom} />}
     </div>
-  )
-}
+  );
+};
 
-export default App
+export default App;

example/src/ComponentExample.js

@@ -1,25 +1,25 @@
-import React, { Component } from 'react'
+import React, { Component } from 'react';
 
-import 'react-toggle/style.css'
+import 'react-toggle/style.css';
 
-import BottomScrollListener from 'react-bottom-scroll-listener'
+import { BottomScrollListener } from 'react-bottom-scroll-listener';
 
 class ComponentExample extends Component {
   handleOnDocumentBottom = () => {
-    console.log('I am at bottom! ' + Math.round(performance.now()))
+    console.log('I am at bottom! ' + Math.round(performance.now()));
 
     if (this.props.alertOnBottom) {
-      alert('Bottom hit! Too slow? Reduce "debounce" value in props')
+      alert('Bottom hit! Too slow? Reduce "debounce" value in props');
     }
-  }
+  };
 
   handleContainerOnBottom = () => {
-    console.log('I am at bottom in optional container! ' + Math.round(performance.now()))
+    console.log('I am at bottom in optional container! ' + Math.round(performance.now()));
 
     if (this.props.alertOnBottom) {
-      alert('Bottom of this container hit! Too slow? Reduce "debounce" value in props')
+      alert('Bottom of this container hit! Too slow? Reduce "debounce" value in props');
     }
-  }
+  };
 
   render() {
     return (
@@ -39,7 +39,7 @@ class ComponentExample extends Component {
         {/* If you want to listen for the bottom of a specific container you need to forward
             a scrollRef as a ref to your container */}
         <BottomScrollListener onBottom={this.handleContainerOnBottom}>
-          {scrollRef => (
+          {(scrollRef) => (
             <div ref={scrollRef} className="inner-scroll-example">
               <h4>Callback when this container hits bottom</h4>
               <div>Scroll down! ▼▼▼</div>
@@ -50,8 +50,8 @@ class ComponentExample extends Component {
           )}
         </BottomScrollListener>
       </div>
-    )
+    );
   }
 }
 
-export default ComponentExample
+export default ComponentExample;

example/src/HookExample.js

@@ -1,29 +1,29 @@
-import React, { useCallback } from 'react'
+import React, { useCallback } from 'react';
 
-import { useBottomScrollListener } from 'react-bottom-scroll-listener'
+import { useBottomScrollListener } from 'react-bottom-scroll-listener';
 
 const HookExample = ({ alertOnBottom }) => {
   const handleOnDocumentBottom = useCallback(() => {
-    console.log('I am at bottom! ' + Math.round(performance.now()))
+    console.log('I am at bottom! ' + Math.round(performance.now()));
 
     if (alertOnBottom) {
-      alert('Bottom hit!')
+      alert('Bottom hit!');
     }
-  }, [alertOnBottom])
+  }, [alertOnBottom]);
 
   const handleContainerOnBottom = useCallback(() => {
-    console.log('I am at bottom in optional container! ' + Math.round(performance.now()))
+    console.log('I am at bottom in optional container! ' + Math.round(performance.now()));
 
     if (alertOnBottom) {
-      alert('Bottom of this container hit!')
+      alert('Bottom of this container hit!');
     }
-  }, [alertOnBottom])
+  }, [alertOnBottom]);
 
   /* This will trigger handleOnDocumentBottom when the body of the page hits the bottom */
-  useBottomScrollListener(handleOnDocumentBottom)
+  useBottomScrollListener(handleOnDocumentBottom);
 
   /* This will trigger handleOnContainerBottom when the container that is passed the ref hits the bottom */
-  const containerRef = useBottomScrollListener(handleContainerOnBottom)
+  const containerRef = useBottomScrollListener(handleContainerOnBottom);
 
   return (
     <div className="root">
@@ -45,7 +45,7 @@ const HookExample = ({ alertOnBottom }) => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default HookExample
+export default HookExample;

example/src/index.js

@@ -1,7 +1,7 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-import './index.css'
-import App from './App'
+import './index.css';
+import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.render(<App />, document.getElementById('root'));