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

Comparing version 1.0.6 to 1.0.7

dist/cjs/index.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=require("react");function o(t,e,o,i){return new(o||(o=Promise))((function(s,r){function l(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 e;t.done?s(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(l,n)}c((i=i.apply(t,e||[])).next())}))}exports.ScrollDirection=void 0,(t=exports.ScrollDirection||(exports.ScrollDirection={})).UP="up",t.DOWN="down",t.LEFT="left",t.RIGHT="right";class i{constructor(t){this._validateScrollValue=(t,e,o)=>{const i=t<0?-1:1;return Math.abs(t)>e?null!=o?o:e*i:t},this._scroll=function({scrollTop:t,scrollLeft:e}){if(!this._scrollingContainerRef)return;const{scrollHeight:o,scrollWidth:i}=this._scrollingContainerRef;void 0!==t&&(this._scrollingContainerRef.scrollTop=this._validateScrollValue(t,o)),void 0!==e&&(this._scrollingContainerRef.scrollLeft=this._validateScrollValue(e,i))},this._computeThreshold=function(){const{state:{clientWidth:t,clientHeight:e},props:{scrollThreshold:o=1},_scrollingContainerRef:i}=this;if(!i||t===i.clientWidth&&e===i.clientHeight)return;const{clientWidth:s,clientHeight:r,scrollHeight:l,scrollWidth:n}=i;let c={vertical:0,horizontal:0};if("string"==typeof o){const t=Math.abs(parseInt(o));c={vertical:this._validateScrollValue(t,l,r),horizontal:this._validateScrollValue(t,n,s)}}else{const t=o>1?1:o<=0?.1:o;c={vertical:t*r,horizontal:t*s}}this.state.computedScrollThreshold=c,this.state.clientWidth=s,this.state.clientHeight=r},this._getPossibleDirection=function(){this._computeThreshold();const{state:{clientHeight:t,clientWidth:e,computedScrollThreshold:{vertical:o,horizontal:i}},props:{reverse:s={}},_scrollingContainerRef:r}=this,{scrollHeight:l,scrollWidth:n,scrollLeft:c,scrollTop:h}=r,{vertical:a,horizontal:d}=s,f=(t,e)=>Math.abs(t)<=e,g=(t,e,o,i)=>Math.abs(t)>=Math.abs(e-o-i);return{[a?exports.ScrollDirection.DOWN:exports.ScrollDirection.UP]:f(h,o),[a?exports.ScrollDirection.UP:exports.ScrollDirection.DOWN]:g(h,l,t,o),[d?exports.ScrollDirection.RIGHT:exports.ScrollDirection.LEFT]:f(c,i),[d?exports.ScrollDirection.LEFT:exports.ScrollDirection.RIGHT]:g(c,n,e,i)}},this._checkOffsetAndLoadMore=function(){const{state:{isLoading:{start:t}},props:{next:e,hasMore:i},_scrollingContainerRef:s}=this;if(!s)return;const r=this._getPossibleDirection(),l=(s,l)=>o(this,void 0,void 0,(function*(){const o=s===exports.ScrollDirection.UP?"vertical":"horizontal";if(!t[o]&&!t[o]){const t=i[s]&&r[s],n=!t&&i[l]&&r[l];if(t||n)try{const i=t?s:l;this.state.isLoading.start[o]=!0,yield e(i)}finally{this.state.isLoading.end[o]=!0}}}));l(exports.ScrollDirection.UP,exports.ScrollDirection.DOWN),l(exports.ScrollDirection.LEFT,exports.ScrollDirection.RIGHT)},this._setRef=function(t){var e,o;const i=null!==(o=null===(e=null==t?void 0:t.Grid)||void 0===e?void 0:e._scrollingContainer)&&void 0!==o?o:t;if(i&&"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 i.addEventListener&&"function"!=typeof i.removeEventListener||!i)return void console.error("Sorry I can't use this container - try using a different DOM element.");this._scrollingContainerRef=i;const s=()=>{if(!this._scrollingContainerRef)return;const{_scrollingContainerRef:{scrollHeight:t,scrollWidth:e,scrollLeft:o,scrollTop:i},props:{onScroll:s}}=this;s&&s({scrollHeight:t,scrollWidth:e,scrollLeft:o,scrollTop:i}),this._checkOffsetAndLoadMore()};this.state.scrollHeight=this._scrollingContainerRef.scrollHeight,this.state.scrollWidth=this._scrollingContainerRef.scrollWidth;const{initialScroll:r}=this.props;r&&this._scroll({scrollTop:r.top,scrollLeft:r.left}),this._scrollingContainerRef.addEventListener("scroll",s),this.onCleanup=()=>{var t;return null===(t=this._scrollingContainerRef)||void 0===t?void 0:t.removeEventListener("scroll",s)},this._checkOffsetAndLoadMore()},this._onPropsChange=function(t){this.props=t;const{state:{rowLength:e=0,columnLength:o=0,isLoading:{start:i,end:s}},props:{rowLength:r=0,columnLength:l=0,reverse:n={}},_scrollingContainerRef:c}=this;if(!c)return;const{scrollTop:h,scrollLeft:a,scrollHeight:d,scrollWidth:f,clientHeight:g,clientWidth:p}=c,{vertical:u,horizontal:v}=n,L=(t,e,o,i,s,r,l,n,c,h)=>{const a=c.start&&c.end;if(o!==i&&a&&Math.abs(t)<e){l(t+(r-s)*(h?-1:1))}a&&n()};L(h,g,e,r,this.state.scrollHeight,d,(t=>{this._scroll({scrollTop:t})}),(()=>{this.state.isLoading={start:Object.assign(Object.assign({},this.state.isLoading.start),{vertical:!1}),end:Object.assign(Object.assign({},this.state.isLoading.end),{vertical:!1})}}),{start:i.vertical,end:s.vertical},u),L(a,p,o,l,this.state.scrollWidth,f,(t=>{this._scroll({scrollLeft:t})}),(()=>{this.state.isLoading={start:Object.assign(Object.assign({},this.state.isLoading.start),{horizontal:!1}),end:Object.assign(Object.assign({},this.state.isLoading.end),{horizontal:!1})}}),{start:i.horizontal,end:s.horizontal},v),this.state.scrollHeight=d,this.state.rowLength=r,this.state.scrollWidth=f,this.state.columnLength=l,this._checkOffsetAndLoadMore()},this.setRef=this._setRef.bind(this),this.onPropsChange=this._onPropsChange.bind(this),this.props=t,this.state={rowLength:t.rowLength,columnLength:t.columnLength,scrollHeight:0,scrollWidth:0,clientHeight:0,clientWidth:0,isLoading:{start:{vertical:!1,horizontal:!1},end:{vertical:!1,horizontal:!1}},computedScrollThreshold:{vertical:0,horizontal:0}}}}exports.InfiniteScroll=i,exports.useInfiniteScroll=t=>{const{rowLength:o,columnLength:s,hasMore:{up:r,down:l,left:n,right:c}}=t,{current:{setRef:h,onPropsChange:a,onCleanup:d}}=e.useRef(new i(t));return e.useEffect((()=>d),[]),e.useEffect((()=>a(t)),[o,s,r,l,n,c]),{setRef:h}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=require("react");function o(t,e,o,i){return new(o||(o=Promise))((function(s,l){function r(t){try{c(i.next(t))}catch(t){l(t)}}function n(t){try{c(i.throw(t))}catch(t){l(t)}}function c(t){var e;t.done?s(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(r,n)}c((i=i.apply(t,e||[])).next())}))}exports.ScrollDirection=void 0,(t=exports.ScrollDirection||(exports.ScrollDirection={})).UP="up",t.DOWN="down",t.LEFT="left",t.RIGHT="right";class i{constructor(t){this._validateScrollValue=(t,e,o)=>{const i=t<0?-1:1;return Math.abs(t)>e?null!=o?o:e*i:t},this._scroll=function({scrollTop:t,scrollLeft:e}){if(!this._scrollingContainerRef)return;const{scrollHeight:o,scrollWidth:i}=this._scrollingContainerRef;void 0!==t&&(this._scrollingContainerRef.scrollTop=this._validateScrollValue(t,o)),void 0!==e&&(this._scrollingContainerRef.scrollLeft=this._validateScrollValue(e,i))},this._computeThreshold=function(){const{state:{clientWidth:t,clientHeight:e},props:{scrollThreshold:o=1},_scrollingContainerRef:i}=this;if(!i||t===i.clientWidth&&e===i.clientHeight)return;const{clientWidth:s,clientHeight:l,scrollHeight:r,scrollWidth:n}=i;let c={vertical:0,horizontal:0};if("string"==typeof o){const t=Math.abs(parseInt(o));c={vertical:this._validateScrollValue(t,r,l),horizontal:this._validateScrollValue(t,n,s)}}else{const t=o>1?1:o<=0?.1:o;c={vertical:t*l,horizontal:t*s}}this.state.computedScrollThreshold=c,this.state.clientWidth=s,this.state.clientHeight=l},this._getPossibleDirection=function(){this._computeThreshold();const{state:{clientHeight:t,clientWidth:e,computedScrollThreshold:{vertical:o,horizontal:i}},props:{reverse:s={}},_scrollingContainerRef:l}=this,{scrollHeight:r,scrollWidth:n,scrollLeft:c,scrollTop:h}=l,{vertical:a,horizontal:d}=s,f=(t,e)=>Math.abs(t)<=e,g=(t,e,o,i)=>Math.abs(t)>=Math.abs(e-o-i);return{[a?exports.ScrollDirection.DOWN:exports.ScrollDirection.UP]:f(h,o),[a?exports.ScrollDirection.UP:exports.ScrollDirection.DOWN]:g(h,r,t,o),[d?exports.ScrollDirection.RIGHT:exports.ScrollDirection.LEFT]:f(c,i),[d?exports.ScrollDirection.LEFT:exports.ScrollDirection.RIGHT]:g(c,n,e,i)}},this._checkOffsetAndLoadMore=function(){const{state:{isLoading:{start:t}},props:{next:e,hasMore:i},_scrollingContainerRef:s}=this;if(!s)return;const l=this._getPossibleDirection(),r=(s,r)=>o(this,void 0,void 0,(function*(){const o=s===exports.ScrollDirection.UP?"vertical":"horizontal";if(!t[o]&&!t[o]){const t=i[s]&&l[s],n=!t&&i[r]&&l[r];if(t||n)try{const i=t?s:r;this.state.isLoading.start[o]=!0,yield e(i)}finally{this.state.isLoading.end[o]=!0}}}));r(exports.ScrollDirection.UP,exports.ScrollDirection.DOWN),r(exports.ScrollDirection.LEFT,exports.ScrollDirection.RIGHT)},this._setRef=function(t){var e,o,i;if(this._scrollingContainerRef)return;const s=null!==(i=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!==i?i:t;if(s&&"number"!=typeof s.scrollHeight&&"number"!=typeof s.scrollWidth&&"number"!=typeof s.scrollLeft&&"number"!=typeof s.scrollTop&&"number"!=typeof s.clientHeight&&"number"!=typeof s.clientWidth&&"function"!=typeof s.addEventListener&&"function"!=typeof s.removeEventListener||!s)return void console.error("Sorry I can't use this container - try using a different DOM element.");this._scrollingContainerRef=s;const l=()=>{if(!this._scrollingContainerRef)return;const{_scrollingContainerRef:{scrollHeight:t,scrollWidth:e,scrollLeft:o,scrollTop:i},props:{onScroll:s}}=this;s&&s({scrollHeight:t,scrollWidth:e,scrollLeft:o,scrollTop:i}),this._checkOffsetAndLoadMore()};this.state.scrollHeight=this._scrollingContainerRef.scrollHeight,this.state.scrollWidth=this._scrollingContainerRef.scrollWidth;const{initialScroll:r}=this.props;r&&this._scroll({scrollTop:r.top,scrollLeft:r.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._onPropsChange=function(t){this.props=t;const{state:{rowLength:e=0,columnLength:o=0,isLoading:{start:i,end:s}},props:{rowLength:l=0,columnLength:r=0,reverse:n={}},_scrollingContainerRef:c}=this;if(!c)return;const{scrollTop:h,scrollLeft:a,scrollHeight:d,scrollWidth:f,clientHeight:g,clientWidth:u}=c,{vertical:p,horizontal:v}=n,L=(t,e,o,i,s,l,r,n,c,h)=>{const a=c.start&&c.end;if(o!==i&&a&&Math.abs(t)<e){r(t+(l-s)*(h?-1:1))}a&&n()};L(h,g,e,l,this.state.scrollHeight,d,(t=>{this._scroll({scrollTop:t})}),(()=>{this.state.isLoading={start:Object.assign(Object.assign({},this.state.isLoading.start),{vertical:!1}),end:Object.assign(Object.assign({},this.state.isLoading.end),{vertical:!1})}}),{start:i.vertical,end:s.vertical},p),L(a,u,o,r,this.state.scrollWidth,f,(t=>{this._scroll({scrollLeft:t})}),(()=>{this.state.isLoading={start:Object.assign(Object.assign({},this.state.isLoading.start),{horizontal:!1}),end:Object.assign(Object.assign({},this.state.isLoading.end),{horizontal:!1})}}),{start:i.horizontal,end:s.horizontal},v),this.state.scrollHeight=d,this.state.rowLength=l,this.state.scrollWidth=f,this.state.columnLength=r,this._checkOffsetAndLoadMore()},this.setRef=this._setRef.bind(this),this.onPropsChange=this._onPropsChange.bind(this),this.props=t,this.state={rowLength:t.rowLength,columnLength:t.columnLength,scrollHeight:0,scrollWidth:0,clientHeight:0,clientWidth:0,isLoading:{start:{vertical:!1,horizontal:!1},end:{vertical:!1,horizontal:!1}},computedScrollThreshold:{vertical:0,horizontal:0}}}}exports.InfiniteScroll=i,exports.useInfiniteScroll=t=>{const{rowLength:o,columnLength:s,hasMore:{up:l,down:r,left:n,right:c}}=t,{current:{setRef:h,onPropsChange:a,onCleanup:d}}=e.useRef(new i(t));return e.useEffect((()=>d),[]),e.useEffect((()=>a(t)),[o,s,l,r,n,c]),{setRef:h}};
 //# sourceMappingURL=index.js.map

dist/esm/index.js

@@ -1,2 +0,2 @@
-import{useRef as t,useEffect as e}from"react";var i;function o(t,e,i,o){return new(i||(i=Promise))((function(s,n){function l(t){try{c(o.next(t))}catch(t){n(t)}}function r(t){try{c(o.throw(t))}catch(t){n(t)}}function c(t){var e;t.done?s(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(l,r)}c((o=o.apply(t,e||[])).next())}))}!function(t){t.UP="up",t.DOWN="down",t.LEFT="left",t.RIGHT="right"}(i||(i={}));class s{constructor(t){this._validateScrollValue=(t,e,i)=>{const o=t<0?-1:1;return Math.abs(t)>e?null!=i?i:e*o:t},this._scroll=function({scrollTop:t,scrollLeft:e}){if(!this._scrollingContainerRef)return;const{scrollHeight:i,scrollWidth:o}=this._scrollingContainerRef;void 0!==t&&(this._scrollingContainerRef.scrollTop=this._validateScrollValue(t,i)),void 0!==e&&(this._scrollingContainerRef.scrollLeft=this._validateScrollValue(e,o))},this._computeThreshold=function(){const{state:{clientWidth:t,clientHeight:e},props:{scrollThreshold:i=1},_scrollingContainerRef:o}=this;if(!o||t===o.clientWidth&&e===o.clientHeight)return;const{clientWidth:s,clientHeight:n,scrollHeight:l,scrollWidth:r}=o;let c={vertical:0,horizontal:0};if("string"==typeof i){const t=Math.abs(parseInt(i));c={vertical:this._validateScrollValue(t,l,n),horizontal:this._validateScrollValue(t,r,s)}}else{const t=i>1?1:i<=0?.1:i;c={vertical:t*n,horizontal:t*s}}this.state.computedScrollThreshold=c,this.state.clientWidth=s,this.state.clientHeight=n},this._getPossibleDirection=function(){this._computeThreshold();const{state:{clientHeight:t,clientWidth:e,computedScrollThreshold:{vertical:o,horizontal:s}},props:{reverse:n={}},_scrollingContainerRef:l}=this,{scrollHeight:r,scrollWidth:c,scrollLeft:h,scrollTop:a}=l,{vertical:d,horizontal:f}=n,g=(t,e)=>Math.abs(t)<=e,u=(t,e,i,o)=>Math.abs(t)>=Math.abs(e-i-o);return{[d?i.DOWN:i.UP]:g(a,o),[d?i.UP:i.DOWN]:u(a,r,t,o),[f?i.RIGHT:i.LEFT]:g(h,s),[f?i.LEFT:i.RIGHT]:u(h,c,e,s)}},this._checkOffsetAndLoadMore=function(){const{state:{isLoading:{start:t}},props:{next:e,hasMore:s},_scrollingContainerRef:n}=this;if(!n)return;const l=this._getPossibleDirection(),r=(n,r)=>o(this,void 0,void 0,(function*(){const o=n===i.UP?"vertical":"horizontal";if(!t[o]&&!t[o]){const t=s[n]&&l[n],i=!t&&s[r]&&l[r];if(t||i)try{const i=t?n:r;this.state.isLoading.start[o]=!0,yield e(i)}finally{this.state.isLoading.end[o]=!0}}}));r(i.UP,i.DOWN),r(i.LEFT,i.RIGHT)},this._setRef=function(t){var e,i;const o=null!==(i=null===(e=null==t?void 0:t.Grid)||void 0===e?void 0:e._scrollingContainer)&&void 0!==i?i:t;if(o&&"number"!=typeof o.scrollHeight&&"number"!=typeof o.scrollWidth&&"number"!=typeof o.scrollLeft&&"number"!=typeof o.scrollTop&&"number"!=typeof o.clientHeight&&"number"!=typeof o.clientWidth&&"function"!=typeof o.addEventListener&&"function"!=typeof o.removeEventListener||!o)return void console.error("Sorry I can't use this container - try using a different DOM element.");this._scrollingContainerRef=o;const s=()=>{if(!this._scrollingContainerRef)return;const{_scrollingContainerRef:{scrollHeight:t,scrollWidth:e,scrollLeft:i,scrollTop:o},props:{onScroll:s}}=this;s&&s({scrollHeight:t,scrollWidth:e,scrollLeft:i,scrollTop:o}),this._checkOffsetAndLoadMore()};this.state.scrollHeight=this._scrollingContainerRef.scrollHeight,this.state.scrollWidth=this._scrollingContainerRef.scrollWidth;const{initialScroll:n}=this.props;n&&this._scroll({scrollTop:n.top,scrollLeft:n.left}),this._scrollingContainerRef.addEventListener("scroll",s),this.onCleanup=()=>{var t;return null===(t=this._scrollingContainerRef)||void 0===t?void 0:t.removeEventListener("scroll",s)},this._checkOffsetAndLoadMore()},this._onPropsChange=function(t){this.props=t;const{state:{rowLength:e=0,columnLength:i=0,isLoading:{start:o,end:s}},props:{rowLength:n=0,columnLength:l=0,reverse:r={}},_scrollingContainerRef:c}=this;if(!c)return;const{scrollTop:h,scrollLeft:a,scrollHeight:d,scrollWidth:f,clientHeight:g,clientWidth:u}=c,{vertical:p,horizontal:v}=r,L=(t,e,i,o,s,n,l,r,c,h)=>{const a=c.start&&c.end;if(i!==o&&a&&Math.abs(t)<e){l(t+(n-s)*(h?-1:1))}a&&r()};L(h,g,e,n,this.state.scrollHeight,d,(t=>{this._scroll({scrollTop:t})}),(()=>{this.state.isLoading={start:Object.assign(Object.assign({},this.state.isLoading.start),{vertical:!1}),end:Object.assign(Object.assign({},this.state.isLoading.end),{vertical:!1})}}),{start:o.vertical,end:s.vertical},p),L(a,u,i,l,this.state.scrollWidth,f,(t=>{this._scroll({scrollLeft:t})}),(()=>{this.state.isLoading={start:Object.assign(Object.assign({},this.state.isLoading.start),{horizontal:!1}),end:Object.assign(Object.assign({},this.state.isLoading.end),{horizontal:!1})}}),{start:o.horizontal,end:s.horizontal},v),this.state.scrollHeight=d,this.state.rowLength=n,this.state.scrollWidth=f,this.state.columnLength=l,this._checkOffsetAndLoadMore()},this.setRef=this._setRef.bind(this),this.onPropsChange=this._onPropsChange.bind(this),this.props=t,this.state={rowLength:t.rowLength,columnLength:t.columnLength,scrollHeight:0,scrollWidth:0,clientHeight:0,clientWidth:0,isLoading:{start:{vertical:!1,horizontal:!1},end:{vertical:!1,horizontal:!1}},computedScrollThreshold:{vertical:0,horizontal:0}}}}const n=i=>{const{rowLength:o,columnLength:n,hasMore:{up:l,down:r,left:c,right:h}}=i,{current:{setRef:a,onPropsChange:d,onCleanup:f}}=t(new s(i));return e((()=>f),[]),e((()=>d(i)),[o,n,l,r,c,h]),{setRef:a}};export{s as InfiniteScroll,i as ScrollDirection,n as useInfiniteScroll};
+import{useRef as t,useEffect as i}from"react";var e;function o(t,i,e,o){return new(e||(e=Promise))((function(s,n){function l(t){try{c(o.next(t))}catch(t){n(t)}}function r(t){try{c(o.throw(t))}catch(t){n(t)}}function c(t){var i;t.done?s(t.value):(i=t.value,i instanceof e?i:new e((function(t){t(i)}))).then(l,r)}c((o=o.apply(t,i||[])).next())}))}!function(t){t.UP="up",t.DOWN="down",t.LEFT="left",t.RIGHT="right"}(e||(e={}));class s{constructor(t){this._validateScrollValue=(t,i,e)=>{const o=t<0?-1:1;return Math.abs(t)>i?null!=e?e:i*o:t},this._scroll=function({scrollTop:t,scrollLeft:i}){if(!this._scrollingContainerRef)return;const{scrollHeight:e,scrollWidth:o}=this._scrollingContainerRef;void 0!==t&&(this._scrollingContainerRef.scrollTop=this._validateScrollValue(t,e)),void 0!==i&&(this._scrollingContainerRef.scrollLeft=this._validateScrollValue(i,o))},this._computeThreshold=function(){const{state:{clientWidth:t,clientHeight:i},props:{scrollThreshold:e=1},_scrollingContainerRef:o}=this;if(!o||t===o.clientWidth&&i===o.clientHeight)return;const{clientWidth:s,clientHeight:n,scrollHeight:l,scrollWidth:r}=o;let c={vertical:0,horizontal:0};if("string"==typeof e){const t=Math.abs(parseInt(e));c={vertical:this._validateScrollValue(t,l,n),horizontal:this._validateScrollValue(t,r,s)}}else{const t=e>1?1:e<=0?.1:e;c={vertical:t*n,horizontal:t*s}}this.state.computedScrollThreshold=c,this.state.clientWidth=s,this.state.clientHeight=n},this._getPossibleDirection=function(){this._computeThreshold();const{state:{clientHeight:t,clientWidth:i,computedScrollThreshold:{vertical:o,horizontal:s}},props:{reverse:n={}},_scrollingContainerRef:l}=this,{scrollHeight:r,scrollWidth:c,scrollLeft:h,scrollTop:a}=l,{vertical:d,horizontal:f}=n,g=(t,i)=>Math.abs(t)<=i,u=(t,i,e,o)=>Math.abs(t)>=Math.abs(i-e-o);return{[d?e.DOWN:e.UP]:g(a,o),[d?e.UP:e.DOWN]:u(a,r,t,o),[f?e.RIGHT:e.LEFT]:g(h,s),[f?e.LEFT:e.RIGHT]:u(h,c,i,s)}},this._checkOffsetAndLoadMore=function(){const{state:{isLoading:{start:t}},props:{next:i,hasMore:s},_scrollingContainerRef:n}=this;if(!n)return;const l=this._getPossibleDirection(),r=(n,r)=>o(this,void 0,void 0,(function*(){const o=n===e.UP?"vertical":"horizontal";if(!t[o]&&!t[o]){const t=s[n]&&l[n],e=!t&&s[r]&&l[r];if(t||e)try{const e=t?n:r;this.state.isLoading.start[o]=!0,yield i(e)}finally{this.state.isLoading.end[o]=!0}}}));r(e.UP,e.DOWN),r(e.LEFT,e.RIGHT)},this._setRef=function(t){var i,e,o;if(this._scrollingContainerRef)return;const s=null!==(o=null!==(i=null==t?void 0:t._scrollingContainer)&&void 0!==i?i:null===(e=null==t?void 0:t.Grid)||void 0===e?void 0:e._scrollingContainer)&&void 0!==o?o:t;if(s&&"number"!=typeof s.scrollHeight&&"number"!=typeof s.scrollWidth&&"number"!=typeof s.scrollLeft&&"number"!=typeof s.scrollTop&&"number"!=typeof s.clientHeight&&"number"!=typeof s.clientWidth&&"function"!=typeof s.addEventListener&&"function"!=typeof s.removeEventListener||!s)return void console.error("Sorry I can't use this container - try using a different DOM element.");this._scrollingContainerRef=s;const n=()=>{if(!this._scrollingContainerRef)return;const{_scrollingContainerRef:{scrollHeight:t,scrollWidth:i,scrollLeft:e,scrollTop:o},props:{onScroll:s}}=this;s&&s({scrollHeight:t,scrollWidth:i,scrollLeft:e,scrollTop:o}),this._checkOffsetAndLoadMore()};this.state.scrollHeight=this._scrollingContainerRef.scrollHeight,this.state.scrollWidth=this._scrollingContainerRef.scrollWidth;const{initialScroll:l}=this.props;l&&this._scroll({scrollTop:l.top,scrollLeft:l.left}),this._scrollingContainerRef.addEventListener("scroll",n),this.onCleanup=()=>{var t;return null===(t=this._scrollingContainerRef)||void 0===t?void 0:t.removeEventListener("scroll",n)},this._checkOffsetAndLoadMore()},this._onPropsChange=function(t){this.props=t;const{state:{rowLength:i=0,columnLength:e=0,isLoading:{start:o,end:s}},props:{rowLength:n=0,columnLength:l=0,reverse:r={}},_scrollingContainerRef:c}=this;if(!c)return;const{scrollTop:h,scrollLeft:a,scrollHeight:d,scrollWidth:f,clientHeight:g,clientWidth:u}=c,{vertical:p,horizontal:v}=r,L=(t,i,e,o,s,n,l,r,c,h)=>{const a=c.start&&c.end;if(e!==o&&a&&Math.abs(t)<i){l(t+(n-s)*(h?-1:1))}a&&r()};L(h,g,i,n,this.state.scrollHeight,d,(t=>{this._scroll({scrollTop:t})}),(()=>{this.state.isLoading={start:Object.assign(Object.assign({},this.state.isLoading.start),{vertical:!1}),end:Object.assign(Object.assign({},this.state.isLoading.end),{vertical:!1})}}),{start:o.vertical,end:s.vertical},p),L(a,u,e,l,this.state.scrollWidth,f,(t=>{this._scroll({scrollLeft:t})}),(()=>{this.state.isLoading={start:Object.assign(Object.assign({},this.state.isLoading.start),{horizontal:!1}),end:Object.assign(Object.assign({},this.state.isLoading.end),{horizontal:!1})}}),{start:o.horizontal,end:s.horizontal},v),this.state.scrollHeight=d,this.state.rowLength=n,this.state.scrollWidth=f,this.state.columnLength=l,this._checkOffsetAndLoadMore()},this.setRef=this._setRef.bind(this),this.onPropsChange=this._onPropsChange.bind(this),this.props=t,this.state={rowLength:t.rowLength,columnLength:t.columnLength,scrollHeight:0,scrollWidth:0,clientHeight:0,clientWidth:0,isLoading:{start:{vertical:!1,horizontal:!1},end:{vertical:!1,horizontal:!1}},computedScrollThreshold:{vertical:0,horizontal:0}}}}const n=e=>{const{rowLength:o,columnLength:n,hasMore:{up:l,down:r,left:c,right:h}}=e,{current:{setRef:a,onPropsChange:d,onCleanup:f}}=t(new s(e));return i((()=>f),[]),i((()=>d(e)),[o,n,l,r,c,h]),{setRef:a}};export{s as InfiniteScroll,e as ScrollDirection,n as useInfiniteScroll};
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-easy-infinite-scroll-hook",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "This hook allows you to create simple, lightweight components with infinite scrolling in all directions, supporting both windowed and scrollable elements.",

README.md

@@ -127,5 +127,38 @@ # react-easy-infinite-scroll-hook
 ## FAQ
-1. Can I use it with `flex-direction: 'row-reverse'`?
-  - Yes, just pass `reverse: { vertical: true }` to the props.
 
+### Can I use it with `flex-direction: 'row-reverse'`?
+Yes, just pass `reverse: { vertical: true }` to the props.
+
+### How to use it with `react-virtualized` `MultiGrid` component?
+`MultiGrid` is a complex component with a lot of scrollable containers, and to use it you must specify the correct container for the `useRef` function:
+
+```js
+import React, { useCallback } from 'react';
+import { useInfiniteScroll } from 'react-easy-infinite-scroll-hook';
+import { MultiGrid } from 'react-virtualized';
+
+const VirtualizedInfiniteListComponent = ({ isLoading, items, canLoadMore, next }) => {
+  const { setRef } = useInfiniteScroll({
+    next,
+    columnLength: items.length,
+    hasMore: { right: canLoadMore },
+  });
+
+  // Use `useCallback` so we don't recreate the function on each render - Could result in infinite loop
+  const selectRef = useCallback(
+    (node) => {
+      setRef(ref._bottomRightGrid)
+    },
+    [setRef],
+  );
+
+  return (
+    <MultiGrid
+      ref={selectRef}
+      { ...rest}
+    />
+  );
+};
+```
+
 ## License
@@ -132,0 +165,0 @@

No alert changes

Improved metrics

Total package byte prevSize

72757

increased by1.77%

Lines of code

301

increased by0.33%

Number of lines in readme file

178

increased by22.76%

No dependency changes