react-intersection-observer-ng/dist/react-intersection-observer.umd.min.js

Monitor if a component is inside the viewport, using IntersectionObserver API

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ReactIntersectionObserver={},e.React)}(this,function(e,t){"use strict";function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function r(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var i=function(e,t,n,r,o,i,a,s){if(!e){var u;if(void 0===t)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,o,i,a,s],f=0;(u=new Error(t.replace(/%s/g,function(){return c[f++]}))).name="Invariant Violation"}throw u.framesToPop=1,u}};var a=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)},s="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},u="object"==typeof s&&s&&s.Object===Object&&s,c="object"==typeof self&&self&&self.Object===Object&&self,f=u||c||Function("return this")(),l=function(){return f.Date.now()},d=f.Symbol,h=Object.prototype,v=h.hasOwnProperty,p=h.toString,g=d?d.toStringTag:void 0;var b=function(e){var t=v.call(e,g),n=e[g];try{e[g]=void 0;var r=!0}catch(e){}var o=p.call(e);return r&&(t?e[g]=n:delete e[g]),o},y=Object.prototype.toString;var w=function(e){return y.call(e)},m="[object Null]",O="[object Undefined]",V=d?d.toStringTag:void 0;var j=function(e){return null==e?void 0===e?O:m:V&&V in Object(e)?b(e):w(e)};var M=function(e){return null!=e&&"object"==typeof e},S="[object Symbol]";var I=function(e){return"symbol"==typeof e||M(e)&&j(e)==S},x=NaN,E=/^\s+|\s+$/g,N=/^[-+]0x[0-9a-f]+$/i,T=/^0b[01]+$/i,_=/^0o[0-7]+$/i,P=parseInt;var k=function(e){if("number"==typeof e)return e;if(I(e))return x;if(a(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=a(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(E,"");var n=T.test(e);return n||_.test(e)?P(e.slice(2),n?2:8):N.test(e)?x:+e},C="Expected a function",D=Math.max,R=Math.min;var $=function(e,t,n){var r,o,i,s,u,c,f=0,d=!1,h=!1,v=!0;if("function"!=typeof e)throw new TypeError(C);function p(t){var n=r,i=o;return r=o=void 0,f=t,s=e.apply(i,n)}function g(e){var n=e-c;return void 0===c||n>=t||n<0||h&&e-f>=i}function b(){var e=l();if(g(e))return y(e);u=setTimeout(b,function(e){var n=t-(e-c);return h?R(n,i-(e-f)):n}(e))}function y(e){return u=void 0,v&&r?p(e):(r=o=void 0,s)}function w(){var e=l(),n=g(e);if(r=arguments,o=this,c=e,n){if(void 0===u)return function(e){return f=e,u=setTimeout(b,t),d?p(e):s}(c);if(h)return u=setTimeout(b,t),p(c)}return void 0===u&&(u=setTimeout(b,t)),s}return t=k(t)||0,a(n)&&(d=!!n.leading,i=(h="maxWait"in n)?D(k(n.maxWait)||0,t):i,v="trailing"in n?!!n.trailing:v),w.cancel=function(){void 0!==u&&clearTimeout(u),f=0,r=c=o=u=void 0},w.flush=function(){return void 0===u?s:y(l())},w},A=new Map,U=new Map,W=new Map,q=new Map,F=0;function z(e,t,n){void 0===n&&(n={}),n.threshold||(n.threshold=0);var r=n,o=r.root,a=r.rootMargin,s=r.threshold;if(i(!U.has(e),"react-intersection-observer: Trying to observe %s, but it's already being observed by another instance.\nMake sure the `ref` is only used by a single <Observer /> instance.\n\n%s",e),e){var u=function(e){return e?q.has(e)?q.get(e):(F+=1,q.set(e,F.toString()),q.get(e)+"_"):""}(o)+(a?s.toString()+"_"+a:s.toString()),c=W.get(u);if(!c){var f=$(function(){!function(e){var t=A.get(e);t&&(t.forEach(function(e,t){var n=U.get(t),r=e.intersection,o=e.inView;n&&n.inView!==o&&(n.inView=o,n.callback(o,r))}),A.delete(e))}(u)},null===n.debounce?100:n.debounce,{leading:!1,trailing:!0});c=new IntersectionObserver(function(e){!function(e,t){var n=A.get(t);n||(n=new Map,A.set(t,n));e.forEach(function(e){var t=e.isIntersecting,r=e.intersectionRatio,o=e.target,i=U.get(o);if(i&&r>=0){var a=i.thresholds.some(function(e){return i.inView?r>e:r>=e});if(void 0!==t&&(a=a&&t),i.batch){if(n){var s=n.get(o);s?(s.inView=a,s.intersection=e):n.set(o,{intersection:e,inView:a})}}else i.inView!==a&&(i.inView=a,i.callback(a,e))}})}(e,u),f()},n),u&&W.set(u,c)}var l={callback:t,element:e,inView:!1,observerId:u,batch:!!n.debounce,observer:c,thresholds:c.thresholds||(Array.isArray(s)?s:[s])};return U.set(e,l),c.observe(e),l}}function B(e){if(e){var t=U.get(e);if(t){var n=t.observerId,r=t.observer,o=r.root;r.unobserve(e);var i=!1,a=!1;n&&U.forEach(function(t,r){r!==e&&(t.observerId===n&&(i=!0,a=!0),t.observer.root===o&&(a=!0))}),!a&&o&&q.delete(o),r&&!i&&r.disconnect(),U.delete(e)}}}var G=function(e){var i,a;function s(){for(var t,n=arguments.length,i=new Array(n),a=0;a<n;a++)i[a]=arguments[a];return o(r(t=e.call.apply(e,[this].concat(i))||this),"state",{inView:!1,entry:void 0}),o(r(t),"node",null),o(r(t),"handleNode",function(e){t.node&&B(t.node),t.node=e||null,t.observeNode()}),o(r(t),"handleChange",function(e,n){(e!==t.state.inView||e)&&t.setState({inView:e,entry:n}),t.props.onChange&&t.props.onChange(e,n)}),t}a=e,(i=s).prototype=Object.create(a.prototype),i.prototype.constructor=i,i.__proto__=a;var u=s.prototype;return u.componentDidMount=function(){},u.componentDidUpdate=function(e,t){e.rootMargin===this.props.rootMargin&&e.root===this.props.root&&e.threshold===this.props.threshold||(B(this.node),this.observeNode()),t.inView!==this.state.inView&&this.state.inView&&this.props.triggerOnce&&(B(this.node),this.node=null)},u.componentWillUnmount=function(){this.node&&(B(this.node),this.node=null)},u.observeNode=function(){if(this.node){var e=this.props,t=e.threshold,n=e.root,r=e.rootMargin;z(this.node,this.handleChange,{threshold:t,root:n,rootMargin:r})}},u.render=function(){var e=this.state,r=e.inView,o=e.entry;if(!function(e){return"function"!=typeof e.children}(this.props))return this.props.children({inView:r,entry:o,ref:this.handleNode});var i=this.props,a=i.children,s=i.as,u=i.tag,c=(i.triggerOnce,i.threshold,i.root,i.rootMargin,function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(i,["children","as","tag","triggerOnce","threshold","root","rootMargin"]));return t.createElement(s||u||"div",n({ref:this.handleNode},c),a)},s}(t.Component);o(G,"displayName","InView"),o(G,"defaultProps",{threshold:0,triggerOnce:!1}),e.InView=G,e.default=G,e.useInView=function(e){void 0===e&&(e={});var n=t.useState(null),r=n[0],o=n[1],i=t.useState({inView:!1,entry:void 0}),a=i[0],s=i[1];return t.useEffect(function(){if(r)return z(r,function(t,n){s({inView:t,entry:n}),t&&e.triggerOnce&&B(r)},e),function(){B(r)}},[r,e.threshold,e.root,e.rootMargin,e.triggerOnce]),t.useDebugValue(a.inView),[o,a.inView,a.entry]},Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=react-intersection-observer.umd.min.js.map