use-is-in-viewport
Version:
A react hook to use the IntersectionObserver declaratively in your React app.
3 lines (2 loc) • 1.12 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("observe-element-in-viewport"),require("react")):"function"==typeof define&&define.amd?define(["observe-element-in-viewport","react"],t):e.useIsInViewport=t(e.observeElementInViewport,e.react)}(this,function(e,t){function n(e){return"object"==typeof e&&"current"in e}function r(e){return"function"==typeof e&&"function"==typeof e.call}return function(u){void 0===u&&(u={});var o=t.useState(null),i=o[0],c=o[1],f=u.target,l=u.viewport,p=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&-1===t.indexOf(r)&&(n[r]=e[r]);return n}(u,["target","viewport"]),a=t.useRef(null),s=t.useRef(null),v=t.useCallback(function(e){a.current=e,l&&(r(l)?l(e):n(l)&&(l.current=e))},[a,l]),b=t.useCallback(function(e){s.current=e,f&&(r(f)?f(e):n(f)&&(f.current=e))},[s,f]);return t.useEffect(function(){if(s.current)return e.observeElementInViewport(s.current,function(){return c(!0)},function(){return c(!1)},Object.assign({},p,{viewport:a.current}))},[s.current,p,a]),[i,b,v]}});
//# sourceMappingURL=index.umd.js.map