react-bottom-scroll-listener - npm Package Compare versions

Comparing version 4.1.1 to 5.0.0

dist/component/index.d.ts

@@ -1,4 +0,4 @@
-import React from 'react';
+import { MutableRefObject } from 'react';
 import { DebounceOptions } from '../hook';
-export interface Props {
+export interface BottomScrollListenerProps {
     /**
@@ -30,8 +30,10 @@ * Required callback that will be invoked when scrolled to bottom
      * */
-    children?: JSX.Element | (<T>(ref: ((instance: T | null) => void) | React.MutableRefObject<T | null> | null) => JSX.Element);
+    children?: JSX.Element | (<T>(ref: ((instance: T | null) => void) | MutableRefObject<T | null> | null) => JSX.Element);
 }
 /**
  * A simple React component that lets you listen for when you have scrolled to the bottom.
+ *
+ * @param {BottomScrollListenerProps} props
  */
-declare const BottomScrollListener: ({ children, onBottom, offset, debounce, debounceOptions, triggerOnNoScroll }: Props) => JSX.Element | null;
+declare const BottomScrollListener: ({ children, onBottom, offset, debounce, debounceOptions, triggerOnNoScroll, }: BottomScrollListenerProps) => JSX.Element | null;
 export default BottomScrollListener;

dist/hook/index.d.ts

 /// <reference types="lodash" />
-/// <reference types="react" />
+import { RefObject } from 'react';
 import lodashDebounce from 'lodash.debounce';
 export declare type DebounceOptions = Parameters<typeof lodashDebounce>[2];
 /**
+ * @description
  *  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
- * @param debounceOptions Options passed to lodash.debounce, see https://lodash.com/docs/4.17.15#debounce
- * @param triggerOnNoScroll Triggers the onBottom callback when the page has no scrollbar
- * @return React.MutableRefObject Optionally you can use this to pass to a element to use that as the scroll container
+ * @param {Object} options - Optional parameters
+ * @param {number} [options.offset=0] - Offset from bottom of page in pixels. E.g. 300 will trigger onBottom 300px from the bottom of the page
+ * @param {number} [options.debounce=200] - Optional debounce in milliseconds, defaults to 200ms
+ * @param {DebounceOptions} [options.debounceOptions={leading=true}] - Options passed to lodash.debounce, see https://lodash.com/docs/4.17.15#debounce
+ * @param {boolean} [options.triggerOnNoScroll=false] - Triggers the onBottom callback when the page has no scrollbar
+ * @returns {RefObject} ref - If passed to a element as a ref, e.g. a div it will register scrolling to the bottom of that div instead of document viewport
  */
-declare function useBottomScrollListener<T extends HTMLElement>(onBottom: () => void, offset?: number, debounce?: number, debounceOptions?: DebounceOptions, triggerOnNoScroll?: boolean): import("react").RefObject<T>;
+declare function useBottomScrollListener<T extends HTMLElement>(onBottom: () => void, options?: {
+    offset?: number;
+    debounce?: number;
+    debounceOptions?: DebounceOptions;
+    triggerOnNoScroll?: boolean;
+}): RefObject<T>;
 export default useBottomScrollListener;

dist/index.d.ts

@@ -1,4 +0,3 @@
-import BottomScrollListener from './component';
-import useBottomScrollListener from './hook';
-export { useBottomScrollListener };
-export default BottomScrollListener;
+export { default as BottomScrollListener } from './component';
+export type { BottomScrollListenerProps } from './component';
+export { default as useBottomScrollListener } from './hook';

dist/index.js

@@ -14,21 +14,20 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-function useBottomScrollListener(onBottom, offset, debounce, debounceOptions, triggerOnNoScroll) {
-  if (offset === void 0) {
-    offset = 0;
-  }
+function useBottomScrollListener(onBottom, options) {
+  var _useMemo = react.useMemo(function () {
+    var _options$offset, _options$debounce, _options$debounceOpti, _options$triggerOnNoS;
 
-  if (debounce === void 0) {
-    debounce = 200;
-  }
-
-  if (debounceOptions === void 0) {
-    debounceOptions = {
-      leading: true
+    return {
+      offset: (_options$offset = options === null || options === void 0 ? void 0 : options.offset) != null ? _options$offset : 0,
+      debounce: (_options$debounce = options === null || options === void 0 ? void 0 : options.debounce) != null ? _options$debounce : 200,
+      debounceOptions: (_options$debounceOpti = options === null || options === void 0 ? void 0 : options.debounceOptions) != null ? _options$debounceOpti : {
+        leading: true
+      },
+      triggerOnNoScroll: (_options$triggerOnNoS = options === null || options === void 0 ? void 0 : options.triggerOnNoScroll) != null ? _options$triggerOnNoS : false
     };
-  }
+  }, [options === null || options === void 0 ? void 0 : options.offset, options === null || options === void 0 ? void 0 : options.debounce, options === null || options === void 0 ? void 0 : options.debounceOptions, options === null || options === void 0 ? void 0 : options.triggerOnNoScroll]),
+      offset = _useMemo.offset,
+      triggerOnNoScroll = _useMemo.triggerOnNoScroll,
+      debounce = _useMemo.debounce,
+      debounceOptions = _useMemo.debounceOptions;
 
-  if (triggerOnNoScroll === void 0) {
-    triggerOnNoScroll = false;
-  }
-
   var debouncedOnBottom = react.useMemo(function () {
@@ -90,8 +89,13 @@ return createCallback(debounce, onBottom, debounceOptions);
       triggerOnNoScroll = _ref.triggerOnNoScroll;
-  var optionalScrollContainerRef = useBottomScrollListener(onBottom, offset, debounce, debounceOptions, triggerOnNoScroll);
+  var optionalScrollContainerRef = useBottomScrollListener(onBottom, {
+    offset: offset,
+    debounce: debounce,
+    debounceOptions: debounceOptions,
+    triggerOnNoScroll: triggerOnNoScroll
+  });
   if (!children) return null;else if (typeof children === 'function') return children(optionalScrollContainerRef);else return children;
 };
 
-exports.default = BottomScrollListener;
+exports.BottomScrollListener = BottomScrollListener;
 exports.useBottomScrollListener = useBottomScrollListener;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -12,21 +12,20 @@ import { useMemo, useRef, useCallback, useEffect } from 'react';
 
-function useBottomScrollListener(onBottom, offset, debounce, debounceOptions, triggerOnNoScroll) {
-  if (offset === void 0) {
-    offset = 0;
-  }
+function useBottomScrollListener(onBottom, options) {
+  var _useMemo = useMemo(function () {
+    var _options$offset, _options$debounce, _options$debounceOpti, _options$triggerOnNoS;
 
-  if (debounce === void 0) {
-    debounce = 200;
-  }
-
-  if (debounceOptions === void 0) {
-    debounceOptions = {
-      leading: true
+    return {
+      offset: (_options$offset = options === null || options === void 0 ? void 0 : options.offset) != null ? _options$offset : 0,
+      debounce: (_options$debounce = options === null || options === void 0 ? void 0 : options.debounce) != null ? _options$debounce : 200,
+      debounceOptions: (_options$debounceOpti = options === null || options === void 0 ? void 0 : options.debounceOptions) != null ? _options$debounceOpti : {
+        leading: true
+      },
+      triggerOnNoScroll: (_options$triggerOnNoS = options === null || options === void 0 ? void 0 : options.triggerOnNoScroll) != null ? _options$triggerOnNoS : false
     };
-  }
+  }, [options === null || options === void 0 ? void 0 : options.offset, options === null || options === void 0 ? void 0 : options.debounce, options === null || options === void 0 ? void 0 : options.debounceOptions, options === null || options === void 0 ? void 0 : options.triggerOnNoScroll]),
+      offset = _useMemo.offset,
+      triggerOnNoScroll = _useMemo.triggerOnNoScroll,
+      debounce = _useMemo.debounce,
+      debounceOptions = _useMemo.debounceOptions;
 
-  if (triggerOnNoScroll === void 0) {
-    triggerOnNoScroll = false;
-  }
-
   var debouncedOnBottom = useMemo(function () {
@@ -88,8 +87,12 @@ return createCallback(debounce, onBottom, debounceOptions);
       triggerOnNoScroll = _ref.triggerOnNoScroll;
-  var optionalScrollContainerRef = useBottomScrollListener(onBottom, offset, debounce, debounceOptions, triggerOnNoScroll);
+  var optionalScrollContainerRef = useBottomScrollListener(onBottom, {
+    offset: offset,
+    debounce: debounce,
+    debounceOptions: debounceOptions,
+    triggerOnNoScroll: triggerOnNoScroll
+  });
   if (!children) return null;else if (typeof children === 'function') return children(optionalScrollContainerRef);else return children;
 };
 
-export default BottomScrollListener;
-export { useBottomScrollListener };
+export { BottomScrollListener, useBottomScrollListener };
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "react-bottom-scroll-listener",
-  "version": "4.1.1",
+  "version": "5.0.0",
   "description": "A simple React component that lets you listen for when you have scrolled to the bottom.",
@@ -34,4 +34,4 @@ "repository": "https://github.com/karl-run/react-bottom-scroll-listener",
     "test:build": "run-s build",
-    "test:lint": "eslint .",
-    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
+    "test:lint": "eslint src --ext .ts,.tsx",
+    "test:unit": "cross-env CI=1 react-scripts test --coverage",
     "test:watch": "react-scripts test --env=jsdom",
@@ -45,20 +45,18 @@ "predeploy": "cd example && yarn install && yarn run build",
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^16.0.0 || ^17.0.0",
+    "react-dom": "^16.0.0 || ^17.0.0"
   },
   "devDependencies": {
     "@testing-library/react-hooks": "^3.2.1",
-    "@types/jest": "^25.1.4",
+    "@types/jest": "^26.0.15",
     "@types/lodash.debounce": "^4.0.6",
     "@types/react": "^16.9.27",
     "@types/react-dom": "^16.9.7",
-    "@typescript-eslint/eslint-plugin": "^2.26.0",
-    "@typescript-eslint/parser": "^2.26.0",
+    "@typescript-eslint/eslint-plugin": "^4.5.0",
+    "@typescript-eslint/parser": "^4.5.0",
     "babel-eslint": "^10.0.3",
     "cross-env": "^7.0.2",
-    "eslint": "6.6.0",
+    "eslint": "7.11.0",
     "eslint-config-prettier": "^6.7.0",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-config-standard-react": "^9.2.0",
-    "eslint-plugin-flowtype": "^4.7.0",
+    "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.18.2",
@@ -71,4 +69,3 @@ "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react-hooks": "^4.0.0",
-    "eslint-plugin-standard": "^4.0.1",
-    "gh-pages": "^2.2.0",
+    "gh-pages": "^3.1.0",
     "microbundle-crl": "^0.13.10",
@@ -79,5 +76,9 @@ "npm-run-all": "^4.1.5",
     "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.1",
+    "react-scripts": "^4.0.1",
     "react-test-renderer": "^16.13.1"
+  },
+  "resolutions": {
+    "@typescript-eslint/eslint-plugin": "^4.5.0",
+    "@typescript-eslint/parser": "^4.5.0"
   }
 }

README.md

@@ -21,2 +21,43 @@ # react-bottom-scroll-listener ![npm](https://img.shields.io/npm/dm/react-bottom-scroll-listener.svg) [![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)
 
+## Migrating to V5
+
+Version 5 is only a refactor for the hook to use an options parameter, instead
+of relying of function parameters which were starting to get out of hand.
+
+#### If you are using the component, there are no breaking changes
+
+If your hook looks like this:
+
+```tsx
+useBottomScrollListener(callback, 0, 200, undefined, true);
+```
+
+You will have to change it to use the options parameter:
+
+```
+useBottomScrollListener(callback, {
+  offset: 100,
+  debounce: 0,
+  triggerOnNoScroll: true
+})
+```
+
+Remember that you can omit any values that are using the defaults! The defaults are ase following:
+
+```
+  offset: 0,
+  debounce: 200,
+  debounceOptions: { leading: true },
+  triggerOnNoScroll: false,
+```
+
+So for the average use case, you are probably only setting one of these values, so your hook
+might look like this:
+
+```
+useBottomScrollListener(callback, { triggerOnNoScroll: true })
+```
+
+You can refer to the Usage-section for more details.
+
 ## Usage
@@ -34,5 +75,5 @@
 ```jsx
-import { useBottomScrollListener } from 'react-bottom-scroll-listener'
+import { useBottomScrollListener } from 'react-bottom-scroll-listener';
 
-useBottomScrollListener(callback)
+useBottomScrollListener(callback);
 ```
@@ -48,7 +89,7 @@
 ```jsx
-import { useBottomScrollListener } from 'react-bottom-scroll-listener'
+import { useBottomScrollListener } from 'react-bottom-scroll-listener';
 
-const scrollRef = useBottomScrollListener(callback)
+const scrollRef = useBottomScrollListener(callback);
 
-;<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>;
 ```
@@ -59,9 +100,17 @@
 ```
-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
-   debounceOptions,  // Overwrite the debounceOptions for lodash.debounce, default to { leading: true }
-   triggerOnNoScroll,// If container is too short, enables a trigger of the callback if that happens, defaults to false
-) // returns React.MutableRefObject Optionally you can use this to pass to a element to use that as the scroll container
+useBottomScrollListener<T extends HTMLElement>(
+  // Required callback that will be invoked when scrolled to bottom
+  onBottom: () => void,
+  // Options, entirely optional, you can provide one or several to overwrite the defaults
+  options?: {
+    // Offset from bottom of page in pixels. E.g. 300 will trigger onBottom 300px from the bottom of the page
+    offset?: number
+    // Optional debounce in milliseconds, defaults to 200ms
+    debounce?: number
+    // Overwrite the debounceOptions for lodash.debounce, default to { leading: true }
+    debounceOptions?: DebounceOptions
+    // If container is too short, enables a trigger of the callback if that happens, defaults to false
+    triggerOnNoScroll?: boolean
+  },
+); // returns React.MutableRefObject Optionally you can use this to pass to a element to use that as the scroll container
 ```
@@ -78,4 +127,5 @@
 ```jsx
-import BottomScrollListener from 'react-bottom-scroll-listener'
-;<BottomScrollListener onBottom={callback} />
+import BottomScrollListener from 'react-bottom-scroll-listener';
+
+<BottomScrollListener onBottom={callback} />;
 ```
@@ -89,6 +139,7 @@
 ```jsx
-import BottomScrollListener from 'react-bottom-scroll-listener'
-;<BottomScrollListener onBottom={callback}>
+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>}
-</BottomScrollListener>
+</BottomScrollListener>;
 ```
@@ -110,3 +161,3 @@
 | debounceOptions   |     DebounceOptions      | {leading: true} | see the lodash.debounce options: see https://lodash.com/docs/4.17.15#debounce                                                                                                                                                                                                               |
-| triggerOnNoScroll |         boolean          |      false      | if container is too short, enables a trigger of the callback if that happens                                                                                                                                                                                             |
+| triggerOnNoScroll |         boolean          |      false      | if container is too short, enables a trigger of the callback if that happens                                                                                                                                                                                                                |
 | children          | React.Node _or_ Function |      null       | Not required, but you can use this to wrap your components. Most useful when you have some conditional rendering. If this is a function, that function will receive a React.RefObject that _needs_ to be passed to a child element. This element will then be used as the scroll container. |
@@ -113,0 +164,0 @@

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39655

increased by19.22%

Dev dependency count

27

decreased by-10%

Lines of code

233

increased by8.88%

Number of lines in readme file

163

increased by45.54%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes