react-scrollable-feed - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0

CHANGELOG.md

 # Change Log 
 
+<a name="1.2.0"></a>
+## [1.2.0](https://github.com/dizco/react-scrollable-feed/compare/v1.1.2...v1.2.0) (2020-09-30)
+* Added `onScroll` prop
+* Updated dependencies
+
 <a name="1.1.2"></a>
@@ -4,0 +9,0 @@ ## [1.1.2](https://github.com/dizco/react-scrollable-feed/compare/v1.1.1...v1.1.2) (2020-01-01)

dist/index.d.ts

@@ -10,2 +10,3 @@ import * as React from 'react';
     className?: string;
+    onScroll?: (isAtBottom: boolean) => void;
 };
@@ -36,4 +37,8 @@ declare type ScrollableFeedComponentProps = Readonly<{
     private static isViewable;
+    /**
+     * Fires the onScroll event, sending isAtBottom boolean as its first parameter
+     */
+    protected handleScroll(): void;
     render(): React.ReactNode;
 }
 export default ScrollableFeed;

dist/index.es.js

@@ -69,2 +69,3 @@ import { createElement, createRef, Component } from 'react';
         _this.wrapperRef = createRef();
+        _this.handleScroll = _this.handleScroll.bind(_this);
         return _this;
@@ -127,6 +128,16 @@ }
     };
+    /**
+     * Fires the onScroll event, sending isAtBottom boolean as its first parameter
+     */
+    ScrollableFeed.prototype.handleScroll = function () {
+        var _a = this.props, viewableDetectionEpsilon = _a.viewableDetectionEpsilon, onScroll = _a.onScroll;
+        if (onScroll && this.bottomRef.current && this.wrapperRef.current) {
+            var isAtBottom = ScrollableFeed.isViewable(this.wrapperRef.current, this.bottomRef.current, viewableDetectionEpsilon);
+            onScroll(isAtBottom);
+        }
+    };
     ScrollableFeed.prototype.render = function () {
         var _a = this.props, children = _a.children, className = _a.className;
         var joinedClassName = styles.scrollableDiv + (className ? " " + className : "");
-        return (createElement("div", { className: joinedClassName, ref: this.wrapperRef },
+        return (createElement("div", { className: joinedClassName, ref: this.wrapperRef, onScroll: this.handleScroll },
             children,
@@ -148,2 +159,3 @@ createElement("div", { ref: this.bottomRef })));
         viewableDetectionEpsilon: 2,
+        onScroll: function () { },
     };
@@ -150,0 +162,0 @@ return ScrollableFeed;

dist/index.js

@@ -73,2 +73,3 @@ 'use strict';
         _this.wrapperRef = React.createRef();
+        _this.handleScroll = _this.handleScroll.bind(_this);
         return _this;
@@ -131,6 +132,16 @@ }
     };
+    /**
+     * Fires the onScroll event, sending isAtBottom boolean as its first parameter
+     */
+    ScrollableFeed.prototype.handleScroll = function () {
+        var _a = this.props, viewableDetectionEpsilon = _a.viewableDetectionEpsilon, onScroll = _a.onScroll;
+        if (onScroll && this.bottomRef.current && this.wrapperRef.current) {
+            var isAtBottom = ScrollableFeed.isViewable(this.wrapperRef.current, this.bottomRef.current, viewableDetectionEpsilon);
+            onScroll(isAtBottom);
+        }
+    };
     ScrollableFeed.prototype.render = function () {
         var _a = this.props, children = _a.children, className = _a.className;
         var joinedClassName = styles.scrollableDiv + (className ? " " + className : "");
-        return (React.createElement("div", { className: joinedClassName, ref: this.wrapperRef },
+        return (React.createElement("div", { className: joinedClassName, ref: this.wrapperRef, onScroll: this.handleScroll },
             children,
@@ -152,2 +163,3 @@ React.createElement("div", { ref: this.bottomRef })));
         viewableDetectionEpsilon: 2,
+        onScroll: function () { },
     };
@@ -154,0 +166,0 @@ return ScrollableFeed;

package.json

 {
   "name": "react-scrollable-feed",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "",
@@ -34,24 +34,24 @@ "author": "dizco",
   "devDependencies": {
-    "@testing-library/jest-dom": "^4.2.3",
-    "@testing-library/react": "^9.3.1",
-    "@types/jest": "^24.0.15",
-    "@types/react": "^16.8.23",
-    "@types/react-dom": "^16.8.4",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.5.0",
+    "@types/jest": "^24.9.1",
+    "@types/react": "^16.9.49",
+    "@types/react-dom": "^16.9.8",
     "babel-core": "^6.26.3",
     "babel-runtime": "^6.26.0",
-    "cross-env": "^5.2.0",
-    "cypress": "^3.6.0",
-    "gh-pages": "^2.0.1",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
+    "cross-env": "^5.2.1",
+    "cypress": "^3.8.3",
+    "gh-pages": "^2.2.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-scripts-ts": "^4.0.8",
-    "rollup": "^1.16.7",
-    "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-commonjs": "^10.0.1",
+    "rollup": "^1.32.1",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-peer-deps-external": "^2.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.3",
     "rollup-plugin-postcss-modules": "2.0.1",
     "rollup-plugin-typescript2": "^0.21.2",
-    "rollup-plugin-url": "^2.2.2",
-    "typescript": "^3.5.3"
+    "rollup-plugin-url": "^2.2.4",
+    "typescript": "^3.9.7"
   },
@@ -58,0 +58,0 @@ "files": [

README.md

@@ -143,3 +143,3 @@ <h1 align="center" style="border-bottom: none;">react-scrollable-feed</h1>
 
-`CSS` class that can be added on the wrapping div created by `ScrollableFeed`. 
+`CSS` class that can be added on the wrapping div created by `ScrollableFeed`.
 
@@ -153,2 +153,11 @@ ### viewableDetectionEpsilon
 
+### onScroll
+
+- Type: `(isAtBottom: boolean) => void`
+- Default: `() => {}`
+
+Is called when the `onScroll` event is triggered on the wrapper div created by `ScrollableFeed`.
+
+Provides `isAtBottom` boolean value as a parameter, which indicates if the scroll is at bottom position, taking `viewableDetectionEpsilon` into account.
+
 ## For more details
@@ -155,0 +164,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

67174

increased by7.74%

Lines of code

345

increased by9.18%

Number of lines in readme file

172

increased by5.52%

No dependency changes