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

Comparing version 4.1.0 to 4.1.1

dist/component/index.d.ts

@@ -23,3 +23,3 @@ import React from 'react';
      */
-    triggerOnNoScroll: boolean;
+    triggerOnNoScroll?: boolean;
     /**
@@ -26,0 +26,0 @@ *   Optional children to be rendered.

package.json

 {
   "name": "react-bottom-scroll-listener",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "A simple React component that lets you listen for when you have scrolled to the bottom.",
@@ -5,0 +5,0 @@ "repository": "https://github.com/karl-run/react-bottom-scroll-listener",

README.md

@@ -33,5 +33,5 @@ # 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)
 ```jsx
-import { useBottomScrollListener } from 'react-bottom-scroll-listener';
+import { useBottomScrollListener } from 'react-bottom-scroll-listener'
 
-useBottomScrollListener(callback);
+useBottomScrollListener(callback)
 ```
@@ -47,7 +47,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,5 +59,7 @@
 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
+   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
@@ -75,5 +77,4 @@ ```
 ```jsx
-import BottomScrollListener from 'react-bottom-scroll-listener';
-
-<BottomScrollListener onBottom={callback} />
+import BottomScrollListener from 'react-bottom-scroll-listener'
+;<BottomScrollListener onBottom={callback} />
 ```
@@ -87,8 +88,5 @@
 ```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>
-  )}
+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>
@@ -105,8 +103,10 @@ ```
 
-| Property |           Type           | Default | Description                                                                                                                                                                                                                                                                                 |
-| -------- | :----------------------: | :-----: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| onBottom |         Function         |  null   | **(required):** callback invoked when bottom is reached                                                                                                                                                                                                                                     |
-| debounce |          number          |   200   | milliseconds, how much debounce there should be on the callback                                                                                                                                                                                                                             |
-| offset   |          number          |    0    | offset from bottom in pixels. E.g. 300 if it should invoke `onBottom` 300px before the bottom.                                                                                                                                                                                              |
-| 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. |
+| Property          |           Type           |     Default     | Description                                                                                                                                                                                                                                                                                 |
+| ----------------- | :----------------------: | :-------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| onBottom          |         Function         |      null       | **(required):** callback invoked when bottom is reached                                                                                                                                                                                                                                     |
+| debounce          |          number          |       200       | milliseconds, how much debounce there should be on the callback                                                                                                                                                                                                                             |
+| offset            |          number          |        0        | offset from bottom in pixels. E.g. 300 if it should invoke `onBottom` 300px before the bottom.                                                                                                                                                                                              |
+| 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                                                                                                                                                                                             |
+| 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 +113,0 @@ # Migrating from 2.x.x to 3.x.x

New 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

Fixed alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

33261

decreased by-62.08%

Number of package files

10

decreased by-23.08%

Lines of code

214

decreased by-70.68%

No dependency changes