react-bottom-scroll-listener
Version:
A simple React component that lets you listen for when you have scrolled to the bottom.
2 lines (1 loc) • 1.43 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("lodash.debounce"),u=require("react"),b=(l,e,c)=>l?m(e,l,c):e;function i(l,e){const{offset:c,triggerOnNoScroll:o,debounce:s,debounceOptions:f}=u.useMemo(()=>({offset:(e==null?void 0:e.offset)??0,debounce:(e==null?void 0:e.debounce)??200,debounceOptions:(e==null?void 0:e.debounceOptions)??{leading:!0},triggerOnNoScroll:(e==null?void 0:e.triggerOnNoScroll)??!1}),[e==null?void 0:e.offset,e==null?void 0:e.debounce,e==null?void 0:e.debounceOptions,e==null?void 0:e.triggerOnNoScroll]),n=u.useMemo(()=>b(s,l,f),[s,l,f]),d=u.useRef(null),t=u.useCallback(()=>{if(d.current!=null){const r=d.current,a=Math.round(r.scrollTop+r.clientHeight);Math.round(r.scrollHeight-c)<=a&&n()}else{const r=document.scrollingElement||document.documentElement,a=Math.round(r.scrollTop+window.innerHeight);Math.round(r.scrollHeight-c)<=a&&n()}},[c,n]);return u.useEffect(()=>{const r=d.current;return r!=null?r.addEventListener("scroll",t):window.addEventListener("scroll",t),o&&t(),()=>{r!=null?r.removeEventListener("scroll",t):window.removeEventListener("scroll",t)}},[t,o]),d}const S=({children:l,onBottom:e,offset:c,debounce:o,debounceOptions:s,triggerOnNoScroll:f})=>{const n=i(e,{offset:c,debounce:o,debounceOptions:s,triggerOnNoScroll:f});return l?typeof l=="function"?l(n):l:null};exports.BottomScrollListener=S;exports.useBottomScrollListener=i;