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

Comparing version 1.0.0 to 1.0.1

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*(){let o=!1;const n=s===exports.ScrollDirection.UP?"vertical":"horizontal";try{if(!t[n]&&!t[n]){const t=i[s]&&r[s],c=!t&&i[l]&&r[l];if(t||c){const i=t?s:l;o=!0,this.state.isLoading.start[n]=o,yield e(i)}}}finally{this.state.isLoading.end[n]=o}}));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,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}};
 //# 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*(){let o=!1;const c=n===i.UP?"vertical":"horizontal";try{if(!t[c]&&!t[c]){const t=s[n]&&l[n],i=!t&&s[r]&&l[r];if(t||i){const i=t?n:r;o=!0,this.state.isLoading.start[c]=o,yield e(i)}}}finally{this.state.isLoading.end[c]=o}}));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 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};
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-easy-infinite-scroll-hook",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "MIT",
-  "description": "A hook that will save you from endless scrolling problems!",
+  "description": "This hook allows you to create simple, lightweight components with infinite scrolling in all directions, supporting both windowed and scrollable elements.",
   "author": "Vadim Rogov <[e-mail]>",
@@ -41,11 +41,16 @@ "main": "dist/cjs/index.js",
     "type": "git",
-    "url": "git+https://github.com/vdmrgv/react-infinite-scroll-hook.git"
+    "url": "git+https://github.com/vdmrgv/react-easy-infinite-scroll-hook.git"
   },
   "keywords": [
-    "react"
+    "react",
+    "react-hooks",
+    "infinite-scroll",
+    "react-component",
+    "flex",
+    "react-virtualized"
   ],
   "bugs": {
-    "url": "https://github.com/vdmrgv/react-infinite-scroll-hook/issues"
+    "url": "https://github.com/vdmrgv/react-easy-infinite-scroll-hook/issues"
   },
-  "homepage": "https://github.com/vdmrgv/react-infinite-scroll-hook#readme",
+  "homepage": "https://github.com/vdmrgv/react-easy-infinite-scroll-hook#readme",
   "devDependencies": {
@@ -52,0 +57,0 @@ "@babel/core": "^7.18.5",

README.md

@@ -1,2 +0,2 @@
-# react-infinite-scroll-hook
+# react-easy-infinite-scroll-hook
 
@@ -9,9 +9,77 @@ A hook that will save you from endless scrolling problems! Infinite scrolling that really works and is very easy to integrate!
 - ⏬ **Universal** - Ability to use all types of scrollable elements or [react-virtualized](https://www.npmjs.com/package/react-virtualized) components
-- 📦 **Support for all loading directions** - Up, Down, Left, Right
+- 📦 **Support for all loading directions** - You can scroll the component indefinitely in the direction you want or all at once (`up`, `down`, `left`, `right`)
+- 📏 **No need to specify heights** - No need to pass the dimensions of the component, scrollbar or element
+- 💬 **Support for "chat history"** - Reverse mode includes
 - ⚙️ **Matches native API** - Intuitive to use
-- 💬 **Support for "chat history"** - Reverse mode includes
-- 📏 **No need to specify heights** - No need to pass the dimensions of the component, scrollbar or element
 - 🛠 **Written in TypeScript** - It'll fit right into your existing TypeScript
   project
-- ✅ **Fully unit tested**
-- 💥 **Lightweight**
+- ✅ **Fully unit tested** - `100%` test coverage
+- 🌳 **Tree-shakeable** - Only include the parts you use
+- 💥 **Lightweight** - Around `~1.5kB`
+
+## Install
+
+```bash
+  # with npm
+  npm install --save react-easy-infinite-scroll-hook
+  # with yarn
+  yarn add react-easy-infinite-scroll-hook
+```
+
+## Usage
+
+```js
+import { useInfiniteScroll } from 'react-easy-infinite-scroll-hook';
+
+const InfiniteListComponent = ({ isLoading, items, canLoadMore, next }) => {
+  const { setRef } = useInfiniteScroll({
+    next,
+    rowLength: items.length,
+    hasMore: { down: canLoadMore },
+  });
+
+  return (
+    <div
+      ref={setRef}
+      style={{
+        height: 500,
+        overflowY: 'auto',
+      }}
+    >
+      {items.map((item) => (
+        <div key={item.key}>{item.value}</div>
+      ))}
+      {isLoading && <div>Loading...</div>}
+    </div>
+  );
+};
+```
+
+## API
+
+After initialization, this hook returns a `setRef` function, which you must pass to your element `ref`.
+
+### Props
+
+| 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 | |
+| hasMore | Yes | Whether there are more items to be loaded. Expect object with directions to load `{ up: false, down: false, left: false, right: false }`   | object | |
+| rowLength | | Number of items in a `vertical` list (scroll axis `Y`) | number | |
+| columnLength | | Number of items in a `horizontal` list (scroll axis `X`) | number | |
+| onScroll | | The callback is called when the container is scrolled: `({ clientHeight: number, scrollHeight: number, scrollTop: number }): void` | Function | |
+| initialScroll | | The initial scroll position of the element, which is applied after the ref has been initialized | 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 element value `0.6 = 60%` | number or string | 1 |
+
+## Friends
+
+- any DOM element with scroll
+- [react-virtualized](https://www.npmjs.com/package/react-virtualized) components
+
+## FAQ
+1. Can I use it with `flex-direction: 'row-reverse'`?
+- Yes, just pass `reverse: { vertical: true }` to the props.
+## Troubleshooting
+1. What should I do if I have an endless call `next` function?
+- Try checking your element and make sure it has a fixed size (the size does not increase after receiving new data, only the size of the scrollbar increases) and the overflow can be scrolled in the right direction.

No alert changes

Improved metrics

Total package byte prevSize

69522

increased by0.83%

Number of lines in readme file

85

increased by400%

Worsened metrics

Number of package files

16

decreased by-20%

Lines of code

300

decreased by-12.28%

No dependency changes