react-easy-infinite-scroll-hook - npm Package Compare versions

Comparing version 1.6.5 to 1.7.1

dist/cjs/index.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,o,e=require("react");function i(t,o,e,i){return new(e||(e=Promise))((function(l,r){function s(t){try{c(i.next(t))}catch(t){r(t)}}function n(t){try{c(i.throw(t))}catch(t){r(t)}}function c(t){var o;t.done?l(t.value):(o=t.value,o instanceof e?o:new e((function(t){t(o)}))).then(s,n)}c((i=i.apply(t,o||[])).next())}))}exports.ScrollAxisName=void 0,(t=exports.ScrollAxisName||(exports.ScrollAxisName={})).VERTICAL="vertical",t.HORIZONTAL="horizontal",exports.ScrollDirection=void 0,(o=exports.ScrollDirection||(exports.ScrollDirection={})).UP="up",o.DOWN="down",o.LEFT="left",o.RIGHT="right";class l{constructor(t){this._validateScrollValue=(t,o,e)=>{const i=t<0?-1:1;return Math.abs(t)>o?null!=e?e:o*i:t},this._scroll=function({scrollTop:t,scrollLeft:o}){if(!this._scrollingContainerRef)return;const{scrollHeight:e,scrollWidth:i}=this._scrollingContainerRef;void 0!==t&&(this._scrollingContainerRef.scrollTop=this._validateScrollValue(t,e)),void 0!==o&&(this._scrollingContainerRef.scrollLeft=this._validateScrollValue(o,i))},this._computeThreshold=function(){const{state:{clientWidth:t,clientHeight:o},props:{scrollThreshold:e=1},_scrollingContainerRef:i}=this;if(!i||t===i.clientWidth&&o===i.clientHeight)return;const{clientWidth:l,clientHeight:r,scrollHeight:s,scrollWidth:n}=i;let c={vertical:0,horizontal:0};if("string"==typeof e){const t=Math.abs(parseInt(e));c={vertical:this._validateScrollValue(t,s,r),horizontal:this._validateScrollValue(t,n,l)}}else{const t=e>1?1:e<=0?.1:e;c={vertical:t*r,horizontal:t*l}}this.state.computedScrollThreshold=c,this.state.clientWidth=l,this.state.clientHeight=r},this._getPossibleDirections=function(){this._computeThreshold();const{state:{clientHeight:t,clientWidth:o,computedScrollThreshold:{vertical:e,horizontal:i}},props:{reverse:l={}},_scrollingContainerRef:r}=this,{scrollHeight:s,scrollWidth:n,scrollLeft:c,scrollTop:h}=r,{column:a,row:u}=l,d=(t,o)=>Math.abs(t)<=o,f=(t,o,e,i)=>Math.abs(t)>=Math.abs(o-e-i);return{[a?exports.ScrollDirection.DOWN:exports.ScrollDirection.UP]:d(h,e),[a?exports.ScrollDirection.UP:exports.ScrollDirection.DOWN]:f(h,s,t,e),[u?exports.ScrollDirection.RIGHT:exports.ScrollDirection.LEFT]:d(c,i),[u?exports.ScrollDirection.LEFT:exports.ScrollDirection.RIGHT]:f(c,n,o,i)}},this._loadByDirection=function(t,o,e){return i(this,void 0,void 0,(function*(){const{state:{isLoading:i,thresholdReached:l},props:{next:r,hasMore:s}}=this,n=t===exports.ScrollDirection.UP?exports.ScrollAxisName.VERTICAL:exports.ScrollAxisName.HORIZONTAL;if(!i){const i=s[t]&&!l[t]&&e[t],c=!i&&s[o]&&!l[o]&&e[o];if(i||c)try{const e=i?t:o;this.state.thresholdReached[e]=!0,this.state.isLoading=!0,yield r(e)}finally{setTimeout((()=>this._onLoadComplete(n)),0)}}}))},this._checkOffsetAndLoadMore=function(){const{_scrollingContainerRef:t}=this;if(!t)return;const o=this._getPossibleDirections(),e=t=>{!o[t]&&this.state.thresholdReached[t]&&(this.state.thresholdReached[t]=!1)};Object.values(exports.ScrollDirection).forEach((t=>e(t))),this._loadByDirection(exports.ScrollDirection.UP,exports.ScrollDirection.DOWN,o),this._loadByDirection(exports.ScrollDirection.LEFT,exports.ScrollDirection.RIGHT,o)},this._setRef=function(t){var o,e,i;const l=null!==(i=null!==(o=null==t?void 0:t._scrollingContainer)&&void 0!==o?o:null===(e=null==t?void 0:t.Grid)||void 0===e?void 0:e._scrollingContainer)&&void 0!==i?i:t;if(l&&"number"!=typeof l.scrollHeight&&"number"!=typeof l.scrollWidth&&"number"!=typeof l.scrollLeft&&"number"!=typeof l.scrollTop&&"number"!=typeof l.clientHeight&&"number"!=typeof l.clientWidth&&"function"!=typeof l.addEventListener&&"function"!=typeof l.removeEventListener||!l)return void console.error("Sorry I can't use this container - try using a different DOM element.");this._scrollingContainerRef=l;const r=()=>{if(!this._scrollingContainerRef)return;const{_scrollingContainerRef:{scrollHeight:t,scrollWidth:o,scrollLeft:e,scrollTop:i,clientHeight:l,clientWidth:r},props:{onScroll:s}}=this;s&&s({clientHeight:l,clientWidth:r,scrollHeight:t,scrollWidth:o,scrollLeft:e,scrollTop:i}),this._checkOffsetAndLoadMore()};this.state.rowCount=this.props.rowCount,this.state.columnCount=this.props.columnCount,this.state.scrollHeight=this._scrollingContainerRef.scrollHeight,this.state.scrollWidth=this._scrollingContainerRef.scrollWidth;const{initialScroll:s}=this.props;s&&this._scroll({scrollTop:s.top,scrollLeft:s.left}),this._scrollingContainerRef.addEventListener("scroll",r),this.onCleanup=()=>{var t;return null===(t=this._scrollingContainerRef)||void 0===t?void 0:t.removeEventListener("scroll",r)},this._checkOffsetAndLoadMore()},this._onLoadComplete=function(t){if(!this._scrollingContainerRef)return;const o=t===exports.ScrollAxisName.VERTICAL,{state:{rowCount:e=0,columnCount:i=0,scrollHeight:l,scrollWidth:r},props:{rowCount:s=0,columnCount:n=0,reverse:c={}},_scrollingContainerRef:h}=this,{scrollTop:a,scrollLeft:u,scrollHeight:d,scrollWidth:f,clientHeight:p,clientWidth:g}=h,C=o?s:n,v=o?a:u,_=o?d:f,m=o?l:r,x=o?p:g;if((o?e:i)!==C&&Math.abs(v)<x){const t=c[o?"column":"row"]?-1:1;this._scroll({["scroll"+(o?"Top":"Left")]:v+(_-m)*t})}this.state.isLoading=!1,this.state[o?"scrollHeight":"scrollWidth"]=_,this.state[o?"rowCount":"columnCount"]=C,setTimeout((()=>this._checkOffsetAndLoadMore()),100)},this._onPropsChange=function(t){this.props=t;const{state:{isLoading:o},props:{rowCount:e,columnCount:i,hasMore:l},_scrollingContainerRef:r}=this;r&&(void 0===e&&(l.down||l.up)&&console.warn(`You provided props with "hasMore: { up: ${!!l.up}, down: ${!!l.down} }" but "rowCount" is "undefined"`),void 0===i&&(l.left||l.right)&&console.warn(`You provided props with "hasMore: { left: ${!!l.left}, right: ${!!l.right} }" but "columnCount" is "undefined"`),o||this._checkOffsetAndLoadMore())},this.setRef=this._setRef.bind(this),this.onPropsChange=this._onPropsChange.bind(this),this.props=t,this.state={rowCount:t.rowCount,columnCount:t.columnCount,scrollHeight:0,scrollWidth:0,clientHeight:0,clientWidth:0,isLoading:!1,computedScrollThreshold:{vertical:0,horizontal:0},thresholdReached:{}}}}const r=t=>{const{rowCount:o,columnCount:i,hasMore:{up:r,down:s,left:n,right:c},next:h,reverse:a}=t,{current:{setRef:u,onPropsChange:d,onCleanup:f}}=e.useRef(new l(t));return e.useEffect((()=>f),[]),e.useEffect((()=>d(t)),[o,i,r,s,n,c,h,null==a?void 0:a.row,null==a?void 0:a.column]),{setRef:u}};exports.InfiniteScroll=l,exports.default=r,exports.useInfiniteScroll=r;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e,o=require("react");function l(t,e,o,l){return new(o||(o=Promise))((function(i,n){function r(t){try{c(l.next(t))}catch(t){n(t)}}function s(t){try{c(l.throw(t))}catch(t){n(t)}}function c(t){var e;t.done?i(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(r,s)}c((l=l.apply(t,e||[])).next())}))}exports.ScrollAxisName=void 0,(t=exports.ScrollAxisName||(exports.ScrollAxisName={})).VERTICAL="vertical",t.HORIZONTAL="horizontal",exports.ScrollDirection=void 0,(e=exports.ScrollDirection||(exports.ScrollDirection={})).UP="up",e.DOWN="down",e.LEFT="left",e.RIGHT="right";class i{constructor(t){this._validateScrollValue=(t,e,o)=>{const l=t<0?-1:1;return Math.abs(t)>e?null!=o?o:e*l:t},this._scroll=function({scrollTop:t,scrollLeft:e}){var o;if(!(null===(o=this._scrollingContainerRef)||void 0===o?void 0:o.scrollingElement))return;const{scrollHeight:l,scrollWidth:i}=this._scrollingContainerRef.scrollingElement;void 0!==t&&(this._scrollingContainerRef.scrollingElement.scrollTop=this._validateScrollValue(t,l)),void 0!==e&&(this._scrollingContainerRef.scrollingElement.scrollLeft=this._validateScrollValue(e,i))},this._computeThreshold=function(){const{state:{clientWidth:t,clientHeight:e},props:{scrollThreshold:o=1},_scrollingContainerRef:l}=this;if(!(null==l?void 0:l.scrollingElement)||t===l.scrollingElement.clientWidth&&e===l.scrollingElement.clientHeight)return;const{clientWidth:i,clientHeight:n,scrollHeight:r,scrollWidth:s}=l.scrollingElement;let c={vertical:0,horizontal:0};if("string"==typeof o){const t=Math.abs(parseInt(o));c={vertical:this._validateScrollValue(t,r,n),horizontal:this._validateScrollValue(t,s,i)}}else{const t=o>1?1:o<=0?.1:o;c={vertical:t*n,horizontal:t*i}}this.state.computedScrollThreshold=c,this.state.clientWidth=i,this.state.clientHeight=n},this._getPossibleDirections=function(){this._computeThreshold();const{state:{clientHeight:t,clientWidth:e,computedScrollThreshold:{vertical:o,horizontal:l}},props:{reverse:i={}},_scrollingContainerRef:n}=this,{scrollHeight:r,scrollWidth:s,scrollLeft:c,scrollTop:h}=n.scrollingElement,{column:a,row:u}=i,d=(t,e)=>Math.abs(t)<=e,f=(t,e,o,l)=>Math.abs(t)>=Math.abs(e-o-l);return{[a?exports.ScrollDirection.DOWN:exports.ScrollDirection.UP]:d(h,o),[a?exports.ScrollDirection.UP:exports.ScrollDirection.DOWN]:f(h,r,t,o),[u?exports.ScrollDirection.RIGHT:exports.ScrollDirection.LEFT]:d(c,l),[u?exports.ScrollDirection.LEFT:exports.ScrollDirection.RIGHT]:f(c,s,e,l)}},this._loadByDirection=function(t,e,o){return l(this,void 0,void 0,(function*(){const{state:{isLoading:l,thresholdReached:i},props:{next:n,hasMore:r}}=this,s=t===exports.ScrollDirection.UP?exports.ScrollAxisName.VERTICAL:exports.ScrollAxisName.HORIZONTAL;if(!l){const l=r[t]&&!i[t]&&o[t],c=!l&&r[e]&&!i[e]&&o[e];if(l||c)try{const o=l?t:e;this.state.thresholdReached[o]=!0,this.state.isLoading=!0,yield n(o)}finally{setTimeout((()=>this._onLoadComplete(s)),0)}}}))},this._checkOffsetAndLoadMore=function(){const{_scrollingContainerRef:t}=this;if(!t)return;const e=this._getPossibleDirections(),o=t=>{!e[t]&&this.state.thresholdReached[t]&&(this.state.thresholdReached[t]=!1)};Object.values(exports.ScrollDirection).forEach((t=>o(t))),this._loadByDirection(exports.ScrollDirection.UP,exports.ScrollDirection.DOWN,e),this._loadByDirection(exports.ScrollDirection.LEFT,exports.ScrollDirection.RIGHT,e)},this._setRef=function(t){var e,o,l;const i={scrollingElement:null,registerEventListener:null};if(this.props.windowScroll)i.scrollingElement=document.scrollingElement,i.registerEventListener=document;else{const n=null!==(l=null!==(e=null==t?void 0:t._scrollingContainer)&&void 0!==e?e:null===(o=null==t?void 0:t.Grid)||void 0===o?void 0:o._scrollingContainer)&&void 0!==l?l:t;i.scrollingElement=n,i.registerEventListener=n}const{scrollingElement:n,registerEventListener:r}=i;if(n&&r&&("number"!=typeof n.scrollHeight||"number"!=typeof n.scrollWidth||"number"!=typeof n.scrollLeft||"number"!=typeof n.scrollTop||"number"!=typeof n.clientHeight||"number"!=typeof n.clientWidth||"function"!=typeof r.addEventListener||"function"!=typeof r.removeEventListener)||!n||!r)return void console.error("Sorry I can't use this container - try using a different DOM element.");this._scrollingContainerRef=i;const s=()=>{var t;if(!(null===(t=this._scrollingContainerRef)||void 0===t?void 0:t.scrollingElement))return;const{_scrollingContainerRef:{scrollingElement:e},props:{onScroll:o}}=this,{scrollHeight:l,scrollWidth:i,scrollLeft:n,scrollTop:r,clientHeight:s,clientWidth:c}=e;o&&o({clientHeight:s,clientWidth:c,scrollHeight:l,scrollWidth:i,scrollLeft:n,scrollTop:r}),this._checkOffsetAndLoadMore()};this.state.rowCount=this.props.rowCount,this.state.columnCount=this.props.columnCount,this.state.scrollHeight=this._scrollingContainerRef.scrollingElement.scrollHeight,this.state.scrollWidth=this._scrollingContainerRef.scrollingElement.scrollWidth;const{initialScroll:c}=this.props;c&&this._scroll({scrollTop:c.top,scrollLeft:c.left}),this._scrollingContainerRef.registerEventListener.addEventListener("scroll",s),this.onCleanup=()=>{var t,e;return null===(e=null===(t=this._scrollingContainerRef)||void 0===t?void 0:t.registerEventListener)||void 0===e?void 0:e.removeEventListener("scroll",s)},this._checkOffsetAndLoadMore()},this._onLoadComplete=function(t){var e;if(!(null===(e=this._scrollingContainerRef)||void 0===e?void 0:e.scrollingElement))return;const o=t===exports.ScrollAxisName.VERTICAL,{state:{rowCount:l=0,columnCount:i=0,scrollHeight:n,scrollWidth:r},props:{rowCount:s=0,columnCount:c=0,reverse:h={}},_scrollingContainerRef:a}=this,{scrollTop:u,scrollLeft:d,scrollHeight:f,scrollWidth:p,clientHeight:g,clientWidth:v}=a.scrollingElement,m=o?s:c,C=o?u:d,_=o?f:p,E=o?n:r,L=o?g:v;if((o?l:i)!==m&&Math.abs(C)<L){const t=h[o?"column":"row"]?-1:1;this._scroll({["scroll"+(o?"Top":"Left")]:C+(_-E)*t})}this.state.isLoading=!1,this.state[o?"scrollHeight":"scrollWidth"]=_,this.state[o?"rowCount":"columnCount"]=m,setTimeout((()=>this._checkOffsetAndLoadMore()),100)},this._onPropsChange=function(t){this.props=t;const{state:{isLoading:e},props:{rowCount:o,columnCount:l,hasMore:i},_scrollingContainerRef:n}=this;n&&(void 0===o&&(i.down||i.up)&&console.warn(`You provided props with "hasMore: { up: ${!!i.up}, down: ${!!i.down} }" but "rowCount" is "undefined"`),void 0===l&&(i.left||i.right)&&console.warn(`You provided props with "hasMore: { left: ${!!i.left}, right: ${!!i.right} }" but "columnCount" is "undefined"`),e||this._checkOffsetAndLoadMore())},this.setRef=this._setRef.bind(this),this.onPropsChange=this._onPropsChange.bind(this),this.props=t,this.state={rowCount:t.rowCount,columnCount:t.columnCount,scrollHeight:0,scrollWidth:0,clientHeight:0,clientWidth:0,isLoading:!1,computedScrollThreshold:{vertical:0,horizontal:0},thresholdReached:{}}}}const n=t=>{const{rowCount:e,columnCount:l,hasMore:{up:n,down:r,left:s,right:c},next:h,windowScroll:a}=t,{current:{setRef:u,onPropsChange:d,onCleanup:f}}=o.useRef(new i(t));return o.useEffect((()=>(a&&u(null),f)),[]),o.useEffect((()=>d(t)),[e,l,n,r,s,c,h]),{setRef:u}};exports.InfiniteScroll=i,exports.default=n,exports.useInfiniteScroll=n;
 //# sourceMappingURL=index.js.map

dist/cjs/types/types.d.ts

@@ -35,6 +35,11 @@ export interface ClientSize {
 export declare type SetRefFn = (ref: any) => void;
-export declare type ScrollingContainerRef = Required<ScrollSize> & Required<ScrollPosition> & Required<ClientSize> & {
+export declare type ScrollingElementRef = Required<ScrollSize> & Required<ScrollPosition> & Required<ClientSize>;
+export declare type RegisterEventListener = {
     addEventListener: EventListenerFn;
     removeEventListener: EventListenerFn;
 };
+export interface ScrollingContainerRef {
+    scrollingElement: ScrollingElementRef | null;
+    registerEventListener: RegisterEventListener | null;
+}
 export declare type InfiniteScrollState = DatasetLength & Required<ScrollSize> & Required<ClientSize> & {
@@ -58,2 +63,3 @@ isLoading: boolean;
     };
+    windowScroll?: boolean;
 };
@@ -60,0 +66,0 @@ export interface UseInfiniteScrollResult {

dist/esm/index.js

@@ -1,2 +0,2 @@
-import{useRef as t,useEffect as o}from"react";function e(t,o,e,i){return new(e||(e=Promise))((function(n,l){function s(t){try{c(i.next(t))}catch(t){l(t)}}function r(t){try{c(i.throw(t))}catch(t){l(t)}}function c(t){var o;t.done?n(t.value):(o=t.value,o instanceof e?o:new e((function(t){t(o)}))).then(s,r)}c((i=i.apply(t,o||[])).next())}))}var i,n;!function(t){t.VERTICAL="vertical",t.HORIZONTAL="horizontal"}(i||(i={})),function(t){t.UP="up",t.DOWN="down",t.LEFT="left",t.RIGHT="right"}(n||(n={}));class l{constructor(t){this._validateScrollValue=(t,o,e)=>{const i=t<0?-1:1;return Math.abs(t)>o?null!=e?e:o*i:t},this._scroll=function({scrollTop:t,scrollLeft:o}){if(!this._scrollingContainerRef)return;const{scrollHeight:e,scrollWidth:i}=this._scrollingContainerRef;void 0!==t&&(this._scrollingContainerRef.scrollTop=this._validateScrollValue(t,e)),void 0!==o&&(this._scrollingContainerRef.scrollLeft=this._validateScrollValue(o,i))},this._computeThreshold=function(){const{state:{clientWidth:t,clientHeight:o},props:{scrollThreshold:e=1},_scrollingContainerRef:i}=this;if(!i||t===i.clientWidth&&o===i.clientHeight)return;const{clientWidth:n,clientHeight:l,scrollHeight:s,scrollWidth:r}=i;let c={vertical:0,horizontal:0};if("string"==typeof e){const t=Math.abs(parseInt(e));c={vertical:this._validateScrollValue(t,s,l),horizontal:this._validateScrollValue(t,r,n)}}else{const t=e>1?1:e<=0?.1:e;c={vertical:t*l,horizontal:t*n}}this.state.computedScrollThreshold=c,this.state.clientWidth=n,this.state.clientHeight=l},this._getPossibleDirections=function(){this._computeThreshold();const{state:{clientHeight:t,clientWidth:o,computedScrollThreshold:{vertical:e,horizontal:i}},props:{reverse:l={}},_scrollingContainerRef:s}=this,{scrollHeight:r,scrollWidth:c,scrollLeft:h,scrollTop:a}=s,{column:u,row:d}=l,f=(t,o)=>Math.abs(t)<=o,p=(t,o,e,i)=>Math.abs(t)>=Math.abs(o-e-i);return{[u?n.DOWN:n.UP]:f(a,e),[u?n.UP:n.DOWN]:p(a,r,t,e),[d?n.RIGHT:n.LEFT]:f(h,i),[d?n.LEFT:n.RIGHT]:p(h,c,o,i)}},this._loadByDirection=function(t,o,l){return e(this,void 0,void 0,(function*(){const{state:{isLoading:e,thresholdReached:s},props:{next:r,hasMore:c}}=this,h=t===n.UP?i.VERTICAL:i.HORIZONTAL;if(!e){const e=c[t]&&!s[t]&&l[t],i=!e&&c[o]&&!s[o]&&l[o];if(e||i)try{const i=e?t:o;this.state.thresholdReached[i]=!0,this.state.isLoading=!0,yield r(i)}finally{setTimeout((()=>this._onLoadComplete(h)),0)}}}))},this._checkOffsetAndLoadMore=function(){const{_scrollingContainerRef:t}=this;if(!t)return;const o=this._getPossibleDirections(),e=t=>{!o[t]&&this.state.thresholdReached[t]&&(this.state.thresholdReached[t]=!1)};Object.values(n).forEach((t=>e(t))),this._loadByDirection(n.UP,n.DOWN,o),this._loadByDirection(n.LEFT,n.RIGHT,o)},this._setRef=function(t){var o,e,i;const n=null!==(i=null!==(o=null==t?void 0:t._scrollingContainer)&&void 0!==o?o:null===(e=null==t?void 0:t.Grid)||void 0===e?void 0:e._scrollingContainer)&&void 0!==i?i:t;if(n&&"number"!=typeof n.scrollHeight&&"number"!=typeof n.scrollWidth&&"number"!=typeof n.scrollLeft&&"number"!=typeof n.scrollTop&&"number"!=typeof n.clientHeight&&"number"!=typeof n.clientWidth&&"function"!=typeof n.addEventListener&&"function"!=typeof n.removeEventListener||!n)return void console.error("Sorry I can't use this container - try using a different DOM element.");this._scrollingContainerRef=n;const l=()=>{if(!this._scrollingContainerRef)return;const{_scrollingContainerRef:{scrollHeight:t,scrollWidth:o,scrollLeft:e,scrollTop:i,clientHeight:n,clientWidth:l},props:{onScroll:s}}=this;s&&s({clientHeight:n,clientWidth:l,scrollHeight:t,scrollWidth:o,scrollLeft:e,scrollTop:i}),this._checkOffsetAndLoadMore()};this.state.rowCount=this.props.rowCount,this.state.columnCount=this.props.columnCount,this.state.scrollHeight=this._scrollingContainerRef.scrollHeight,this.state.scrollWidth=this._scrollingContainerRef.scrollWidth;const{initialScroll:s}=this.props;s&&this._scroll({scrollTop:s.top,scrollLeft:s.left}),this._scrollingContainerRef.addEventListener("scroll",l),this.onCleanup=()=>{var t;return null===(t=this._scrollingContainerRef)||void 0===t?void 0:t.removeEventListener("scroll",l)},this._checkOffsetAndLoadMore()},this._onLoadComplete=function(t){if(!this._scrollingContainerRef)return;const o=t===i.VERTICAL,{state:{rowCount:e=0,columnCount:n=0,scrollHeight:l,scrollWidth:s},props:{rowCount:r=0,columnCount:c=0,reverse:h={}},_scrollingContainerRef:a}=this,{scrollTop:u,scrollLeft:d,scrollHeight:f,scrollWidth:p,clientHeight:g,clientWidth:C}=a,v=o?r:c,_=o?u:d,R=o?f:p,m=o?l:s,L=o?g:C;if((o?e:n)!==v&&Math.abs(_)<L){const t=h[o?"column":"row"]?-1:1;this._scroll({["scroll"+(o?"Top":"Left")]:_+(R-m)*t})}this.state.isLoading=!1,this.state[o?"scrollHeight":"scrollWidth"]=R,this.state[o?"rowCount":"columnCount"]=v,setTimeout((()=>this._checkOffsetAndLoadMore()),100)},this._onPropsChange=function(t){this.props=t;const{state:{isLoading:o},props:{rowCount:e,columnCount:i,hasMore:n},_scrollingContainerRef:l}=this;l&&(void 0===e&&(n.down||n.up)&&console.warn(`You provided props with "hasMore: { up: ${!!n.up}, down: ${!!n.down} }" but "rowCount" is "undefined"`),void 0===i&&(n.left||n.right)&&console.warn(`You provided props with "hasMore: { left: ${!!n.left}, right: ${!!n.right} }" but "columnCount" is "undefined"`),o||this._checkOffsetAndLoadMore())},this.setRef=this._setRef.bind(this),this.onPropsChange=this._onPropsChange.bind(this),this.props=t,this.state={rowCount:t.rowCount,columnCount:t.columnCount,scrollHeight:0,scrollWidth:0,clientHeight:0,clientWidth:0,isLoading:!1,computedScrollThreshold:{vertical:0,horizontal:0},thresholdReached:{}}}}const s=e=>{const{rowCount:i,columnCount:n,hasMore:{up:s,down:r,left:c,right:h},next:a,reverse:u}=e,{current:{setRef:d,onPropsChange:f,onCleanup:p}}=t(new l(e));return o((()=>p),[]),o((()=>f(e)),[i,n,s,r,c,h,a,null==u?void 0:u.row,null==u?void 0:u.column]),{setRef:d}};export{l as InfiniteScroll,i as ScrollAxisName,n as ScrollDirection,s as default,s as useInfiniteScroll};
+import{useRef as t,useEffect as e}from"react";function o(t,e,o,l){return new(o||(o=Promise))((function(n,i){function s(t){try{c(l.next(t))}catch(t){i(t)}}function r(t){try{c(l.throw(t))}catch(t){i(t)}}function c(t){var e;t.done?n(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(s,r)}c((l=l.apply(t,e||[])).next())}))}var l,n;!function(t){t.VERTICAL="vertical",t.HORIZONTAL="horizontal"}(l||(l={})),function(t){t.UP="up",t.DOWN="down",t.LEFT="left",t.RIGHT="right"}(n||(n={}));class i{constructor(t){this._validateScrollValue=(t,e,o)=>{const l=t<0?-1:1;return Math.abs(t)>e?null!=o?o:e*l:t},this._scroll=function({scrollTop:t,scrollLeft:e}){var o;if(!(null===(o=this._scrollingContainerRef)||void 0===o?void 0:o.scrollingElement))return;const{scrollHeight:l,scrollWidth:n}=this._scrollingContainerRef.scrollingElement;void 0!==t&&(this._scrollingContainerRef.scrollingElement.scrollTop=this._validateScrollValue(t,l)),void 0!==e&&(this._scrollingContainerRef.scrollingElement.scrollLeft=this._validateScrollValue(e,n))},this._computeThreshold=function(){const{state:{clientWidth:t,clientHeight:e},props:{scrollThreshold:o=1},_scrollingContainerRef:l}=this;if(!(null==l?void 0:l.scrollingElement)||t===l.scrollingElement.clientWidth&&e===l.scrollingElement.clientHeight)return;const{clientWidth:n,clientHeight:i,scrollHeight:s,scrollWidth:r}=l.scrollingElement;let c={vertical:0,horizontal:0};if("string"==typeof o){const t=Math.abs(parseInt(o));c={vertical:this._validateScrollValue(t,s,i),horizontal:this._validateScrollValue(t,r,n)}}else{const t=o>1?1:o<=0?.1:o;c={vertical:t*i,horizontal:t*n}}this.state.computedScrollThreshold=c,this.state.clientWidth=n,this.state.clientHeight=i},this._getPossibleDirections=function(){this._computeThreshold();const{state:{clientHeight:t,clientWidth:e,computedScrollThreshold:{vertical:o,horizontal:l}},props:{reverse:i={}},_scrollingContainerRef:s}=this,{scrollHeight:r,scrollWidth:c,scrollLeft:h,scrollTop:a}=s.scrollingElement,{column:u,row:d}=i,f=(t,e)=>Math.abs(t)<=e,g=(t,e,o,l)=>Math.abs(t)>=Math.abs(e-o-l);return{[u?n.DOWN:n.UP]:f(a,o),[u?n.UP:n.DOWN]:g(a,r,t,o),[d?n.RIGHT:n.LEFT]:f(h,l),[d?n.LEFT:n.RIGHT]:g(h,c,e,l)}},this._loadByDirection=function(t,e,i){return o(this,void 0,void 0,(function*(){const{state:{isLoading:o,thresholdReached:s},props:{next:r,hasMore:c}}=this,h=t===n.UP?l.VERTICAL:l.HORIZONTAL;if(!o){const o=c[t]&&!s[t]&&i[t],l=!o&&c[e]&&!s[e]&&i[e];if(o||l)try{const l=o?t:e;this.state.thresholdReached[l]=!0,this.state.isLoading=!0,yield r(l)}finally{setTimeout((()=>this._onLoadComplete(h)),0)}}}))},this._checkOffsetAndLoadMore=function(){const{_scrollingContainerRef:t}=this;if(!t)return;const e=this._getPossibleDirections(),o=t=>{!e[t]&&this.state.thresholdReached[t]&&(this.state.thresholdReached[t]=!1)};Object.values(n).forEach((t=>o(t))),this._loadByDirection(n.UP,n.DOWN,e),this._loadByDirection(n.LEFT,n.RIGHT,e)},this._setRef=function(t){var e,o,l;const n={scrollingElement:null,registerEventListener:null};if(this.props.windowScroll)n.scrollingElement=document.scrollingElement,n.registerEventListener=document;else{const i=null!==(l=null!==(e=null==t?void 0:t._scrollingContainer)&&void 0!==e?e:null===(o=null==t?void 0:t.Grid)||void 0===o?void 0:o._scrollingContainer)&&void 0!==l?l:t;n.scrollingElement=i,n.registerEventListener=i}const{scrollingElement:i,registerEventListener:s}=n;if(i&&s&&("number"!=typeof i.scrollHeight||"number"!=typeof i.scrollWidth||"number"!=typeof i.scrollLeft||"number"!=typeof i.scrollTop||"number"!=typeof i.clientHeight||"number"!=typeof i.clientWidth||"function"!=typeof s.addEventListener||"function"!=typeof s.removeEventListener)||!i||!s)return void console.error("Sorry I can't use this container - try using a different DOM element.");this._scrollingContainerRef=n;const r=()=>{var t;if(!(null===(t=this._scrollingContainerRef)||void 0===t?void 0:t.scrollingElement))return;const{_scrollingContainerRef:{scrollingElement:e},props:{onScroll:o}}=this,{scrollHeight:l,scrollWidth:n,scrollLeft:i,scrollTop:s,clientHeight:r,clientWidth:c}=e;o&&o({clientHeight:r,clientWidth:c,scrollHeight:l,scrollWidth:n,scrollLeft:i,scrollTop:s}),this._checkOffsetAndLoadMore()};this.state.rowCount=this.props.rowCount,this.state.columnCount=this.props.columnCount,this.state.scrollHeight=this._scrollingContainerRef.scrollingElement.scrollHeight,this.state.scrollWidth=this._scrollingContainerRef.scrollingElement.scrollWidth;const{initialScroll:c}=this.props;c&&this._scroll({scrollTop:c.top,scrollLeft:c.left}),this._scrollingContainerRef.registerEventListener.addEventListener("scroll",r),this.onCleanup=()=>{var t,e;return null===(e=null===(t=this._scrollingContainerRef)||void 0===t?void 0:t.registerEventListener)||void 0===e?void 0:e.removeEventListener("scroll",r)},this._checkOffsetAndLoadMore()},this._onLoadComplete=function(t){var e;if(!(null===(e=this._scrollingContainerRef)||void 0===e?void 0:e.scrollingElement))return;const o=t===l.VERTICAL,{state:{rowCount:n=0,columnCount:i=0,scrollHeight:s,scrollWidth:r},props:{rowCount:c=0,columnCount:h=0,reverse:a={}},_scrollingContainerRef:u}=this,{scrollTop:d,scrollLeft:f,scrollHeight:g,scrollWidth:p,clientHeight:v,clientWidth:m}=u.scrollingElement,C=o?c:h,_=o?d:f,L=o?g:p,E=o?s:r,R=o?v:m;if((o?n:i)!==C&&Math.abs(_)<R){const t=a[o?"column":"row"]?-1:1;this._scroll({["scroll"+(o?"Top":"Left")]:_+(L-E)*t})}this.state.isLoading=!1,this.state[o?"scrollHeight":"scrollWidth"]=L,this.state[o?"rowCount":"columnCount"]=C,setTimeout((()=>this._checkOffsetAndLoadMore()),100)},this._onPropsChange=function(t){this.props=t;const{state:{isLoading:e},props:{rowCount:o,columnCount:l,hasMore:n},_scrollingContainerRef:i}=this;i&&(void 0===o&&(n.down||n.up)&&console.warn(`You provided props with "hasMore: { up: ${!!n.up}, down: ${!!n.down} }" but "rowCount" is "undefined"`),void 0===l&&(n.left||n.right)&&console.warn(`You provided props with "hasMore: { left: ${!!n.left}, right: ${!!n.right} }" but "columnCount" is "undefined"`),e||this._checkOffsetAndLoadMore())},this.setRef=this._setRef.bind(this),this.onPropsChange=this._onPropsChange.bind(this),this.props=t,this.state={rowCount:t.rowCount,columnCount:t.columnCount,scrollHeight:0,scrollWidth:0,clientHeight:0,clientWidth:0,isLoading:!1,computedScrollThreshold:{vertical:0,horizontal:0},thresholdReached:{}}}}const s=o=>{const{rowCount:l,columnCount:n,hasMore:{up:s,down:r,left:c,right:h},next:a,windowScroll:u}=o,{current:{setRef:d,onPropsChange:f,onCleanup:g}}=t(new i(o));return e((()=>(u&&d(null),g)),[]),e((()=>f(o)),[l,n,s,r,c,h,a]),{setRef:d}};export{i as InfiniteScroll,l as ScrollAxisName,n as ScrollDirection,s as default,s as useInfiniteScroll};
 //# sourceMappingURL=index.js.map

dist/esm/types/types.d.ts

@@ -35,6 +35,11 @@ export interface ClientSize {
 export declare type SetRefFn = (ref: any) => void;
-export declare type ScrollingContainerRef = Required<ScrollSize> & Required<ScrollPosition> & Required<ClientSize> & {
+export declare type ScrollingElementRef = Required<ScrollSize> & Required<ScrollPosition> & Required<ClientSize>;
+export declare type RegisterEventListener = {
     addEventListener: EventListenerFn;
     removeEventListener: EventListenerFn;
 };
+export interface ScrollingContainerRef {
+    scrollingElement: ScrollingElementRef | null;
+    registerEventListener: RegisterEventListener | null;
+}
 export declare type InfiniteScrollState = DatasetLength & Required<ScrollSize> & Required<ClientSize> & {
@@ -58,2 +63,3 @@ isLoading: boolean;
     };
+    windowScroll?: boolean;
 };
@@ -60,0 +66,0 @@ export interface UseInfiniteScrollResult {

dist/index.d.ts

@@ -35,6 +35,11 @@ interface ClientSize {
 declare type SetRefFn = (ref: any) => void;
-declare type ScrollingContainerRef = Required<ScrollSize> & Required<ScrollPosition> & Required<ClientSize> & {
+declare type ScrollingElementRef = Required<ScrollSize> & Required<ScrollPosition> & Required<ClientSize>;
+declare type RegisterEventListener = {
     addEventListener: EventListenerFn;
     removeEventListener: EventListenerFn;
 };
+interface ScrollingContainerRef {
+    scrollingElement: ScrollingElementRef | null;
+    registerEventListener: RegisterEventListener | null;
+}
 declare type InfiniteScrollState = DatasetLength & Required<ScrollSize> & Required<ClientSize> & {
@@ -58,2 +63,3 @@ isLoading: boolean;
     };
+    windowScroll?: boolean;
 };
@@ -87,2 +93,2 @@ interface UseInfiniteScrollResult {
 
-export { ClientSize, DatasetLength, EventListenerFn, InfiniteScroll, InfiniteScrollProps, InfiniteScrollState, ScrollAxis, ScrollAxisName, ScrollDirection, ScrollDirectionState, ScrollOffsetValues, ScrollParams, ScrollPosition, ScrollSize, ScrollingContainerRef, SetRefFn, UseInfiniteScrollProps, UseInfiniteScrollResult, useInfiniteScroll as default, useInfiniteScroll };
+export { ClientSize, DatasetLength, EventListenerFn, InfiniteScroll, InfiniteScrollProps, InfiniteScrollState, RegisterEventListener, ScrollAxis, ScrollAxisName, ScrollDirection, ScrollDirectionState, ScrollOffsetValues, ScrollParams, ScrollPosition, ScrollSize, ScrollingContainerRef, ScrollingElementRef, SetRefFn, UseInfiniteScrollProps, UseInfiniteScrollResult, useInfiniteScroll as default, useInfiniteScroll };

package.json

 {
   "name": "react-easy-infinite-scroll-hook",
-  "version": "1.6.5",
+  "version": "1.7.1",
   "license": "MIT",
@@ -66,6 +66,6 @@ "description": "A react hook for creating simple, fast and lightweight components with infinite scrolling in any direction, supporting both windowed and scrollable elements.",
   "devDependencies": {
-    "@babel/core": "^7.18.5",
-    "@babel/preset-env": "^7.18.2",
+    "@babel/core": "^7.18.9",
+    "@babel/preset-env": "^7.18.9",
     "@babel/preset-react": "^7.17.12",
-    "@babel/preset-typescript": "^7.17.12",
+    "@babel/preset-typescript": "^7.18.6",
     "@rollup/plugin-babel": "^5.3.1",
@@ -76,15 +76,15 @@ "@rollup/plugin-commonjs": "^22.0.0",
     "@testing-library/react": "^13.3.0",
-    "@types/jest": "^28.1.1",
-    "@types/react": "^18.0.13",
-    "@typescript-eslint/eslint-plugin": "^5.28.0",
-    "@typescript-eslint/parser": "^5.28.0",
-    "babel-jest": "^28.1.1",
-    "eslint": "^8.17.0",
+    "@types/jest": "^28.1.6",
+    "@types/react": "^18.0.15",
+    "@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@typescript-eslint/parser": "^5.30.7",
+    "babel-jest": "^28.1.3",
+    "eslint": "^8.20.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
-    "jest": "^28.1.1",
-    "jest-environment-jsdom": "^28.1.1",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
     "lint-staged": "^13.0.2",
@@ -95,3 +95,3 @@ "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.75.6",
+    "rollup": "^2.77.0",
     "rollup-plugin-dts": "^4.2.2",
@@ -101,3 +101,3 @@ "rollup-plugin-peer-deps-external": "^2.2.4",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.3"
+    "typescript": "^4.7.4"
   },
@@ -104,0 +104,0 @@ "peerDependencies": {

README.md

@@ -136,3 +136,3 @@ # react-easy-infinite-scroll-hook
 | Name            | Required  | Description                                                                                                                                                                                                 | Type             | Default Value |
-| --------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ------------- |
+| --------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | :-----------: |
 | next            | Yes       | A callback when more items are requested by the user. Receives a single parameter specifying the direction to load e.g. `(direction) => Promise<void>`                                                      | Function         |               |
@@ -145,3 +145,4 @@ | hasMore         | Yes       | Whether there are more items to load. If marked `true` in the specified direction, it will try to load more items if the threshold is reached. Expect object with directions to load `{ up: false, down: false, left: false, right: false }`      | object           |               |
 | reverse         |           | The direction of the scroll axis is used to create scrolling in the opposite direction, for example when using the CSS style `flex-direction: 'row-reverse'`                                                | object           |               |
-| scrollThreshold |           | The threshold at which the next function is called. It can be specified in pixels from the scrollbar value, for example `'200px'` and as a percentage of the container size `from 0.1 to 1` (`1` is `100%`) | number or string | 1             |
+| scrollThreshold |           | The threshold at which the next function is called. It can be specified in pixels from the scrollbar value, for example `'200px'` and as a percentage of the container size `from 0.1 to 1` (`1` is `100%`) | number or string | `1`            |
+| windowScroll |           | When set to `true`, uses a window as the scroll element. If you are using scroll window don't use `setRef` function | boolean | `false`            |
 
@@ -192,9 +193,14 @@ ## Friends
 
-## Contributions
+### Can I use it with other virtualized or components libraries?
 
-Learn how to [contribute](https://github.com/vdmrgv/react-easy-infinite-scroll-hook/blob/main/CONTRIBUTING.md)
+> Yes you can! To use it with other libraries you must specify the correct DOM element for the `setRef` function.
 
+
+## Contributing
+
+Please read through our [contributing guidelines](https://github.com/vdmrgv/react-easy-infinite-scroll-hook/blob/main/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
+
 ## License
 
-[MIT](https://github.com/vdmrgv/react-easy-infinite-scroll-hook/blob/main/LICENSE) © [vdmrgv](https://github.com/vdmrgv)
+Code released under the [MIT License][license-url] © [Vadim Rogov](https://github.com/vdmrgv).
 
@@ -201,0 +207,0 @@ [package-url]: https://npmjs.org/package/react-easy-infinite-scroll-hook

No alert changes

Improved metrics

Lines of code

353

increased by7.29%

Number of lines in readme file

212

increased by2.91%

Worsened metrics

Total package byte prevSize

83659

decreased by-22%

No dependency changes