UNPKG

use-is-in-viewport

Version:

A react hook to use the IntersectionObserver declaratively in your React app.

3 lines (2 loc) 888 B
import{observeElementInViewport as r}from"observe-element-in-viewport";import{useCallback as t,useEffect as n,useRef as e,useState as u}from"react";function o(r){return"object"==typeof r&&"current"in r}function c(r){return"function"==typeof r&&"function"==typeof r.call}export default function(i){void 0===i&&(i={});var f=u(null),p=f[0],l=f[1],a=i.target,v=i.viewport,m=function(r,t){var n={};for(var e in r)Object.prototype.hasOwnProperty.call(r,e)&&-1===t.indexOf(e)&&(n[e]=r[e]);return n}(i,["target","viewport"]),w=e(null),y=e(null),b=t(function(r){w.current=r,v&&(c(v)?v(r):o(v)&&(v.current=r))},[w,v]),s=t(function(r){y.current=r,a&&(c(a)?a(r):o(a)&&(a.current=r))},[y,a]);return n(function(){if(y.current)return r(y.current,function(){return l(!0)},function(){return l(!1)},Object.assign({},m,{viewport:w.current}))},[y.current,m,w]),[p,s,b]} //# sourceMappingURL=index.esm.js.map