react-atom-trigger/lib/index.es.js

React component to execute code when you scroll to an element. Simple react-waypoint alternative in typescript.

import e from"react";const t=({scrollEvent:t,callback:n,getDebugInfo:r,triggerOnce:i=!1,className:a,behavior:o=`default`,dimensions:s,offset:c=[0,0,0,0]})=>{let l=e.useRef(null),[u,d]=e.useState(void 0),f=e.useRef(void 0),[p,m]=e.useState({leftViewport:0,enteredViewport:0});return e.useLayoutEffect(()=>{if(l.current){let e=l.current.getBoundingClientRect(),[t,n,r,i]=c;e.top>t&&e.bottom<s.height-r&&e.left>i&&e.right<s.width-n?d(`inViewport`):e.top>s.height-r?d(`bottom`):d(`top`)}},[l,t,s,c]),e.useLayoutEffect(()=>{if(f.current===void 0&&u!==void 0&&(f.current=u),u===`inViewport`&&(f.current===`bottom`||f.current===`top`)){if(o===`enter`&&(!i||i&&p.enteredViewport)||o===`default`&&(!i||i&&(p.enteredViewport<1||p.leftViewport<1))){n&&n();let e={...p,enteredViewport:p.enteredViewport+1};r&&r({timesTriggered:e,trigger:`entered`}),m(e)}f.current=u}if((u===`top`||u===`bottom`)&&f.current===`inViewport`&&(f.current=u,o===`leave`&&(!i||i&&p.leftViewport===0)||o===`default`&&(!i||i&&(p.leftViewport<1||p.enteredViewport<1)))){n&&n();let e={...p,leftViewport:p.leftViewport+1};r&&r({timesTriggered:e,trigger:`left`}),m(e)}},[u,n,i,o,r]),e.createElement(`div`,{ref:l,style:{display:`table`},className:a})};function n(e,t){}function r(){let{scrollX:e,scrollY:t}=window;return{scrollX:e,scrollY:t}}function i(){let{innerWidth:e,innerHeight:t}=window;return{width:e,height:t}}function a(t){let[n,r]=e.useState(i()),a=e.useRef(null),o=e.useRef(!1),s=t?.eventListenerTimeoutMs||15;return e.useEffect(()=>{r(i());function e(){a.current&&clearTimeout(a.current),a.current=setTimeout(()=>r(i()),s)}return window.addEventListener(`resize`,e,{passive:t?.passiveEventListener}),o.current=!0,()=>{o&&window.removeEventListener(`resize`,e)}},[]),n}function o({containerRef:t,options:n}){let[i,a]=e.useState(r()),o=e.useRef(null),s=e.useRef(!1);return e.useEffect(()=>{let e=e=>{let t=e.target;o.current&&clearTimeout(o.current),o.current=setTimeout(()=>{a({scrollX:t.scrollLeft,scrollY:t.scrollTop})},n?.eventListenerTimeoutMs||15)},r=t?.current;return r&&(r&&s.current===!1&&r.addEventListener(`scroll`,e,{passive:n?.passiveEventListener}),s.current=!0),()=>{s&&r&&r.removeEventListener(`scroll`,e)}},[t]),i}function s(t){let[n,i]=e.useState(r()),a=e.useRef(null),o=e.useRef(!1);return e.useEffect(()=>{let e=()=>{a.current&&clearTimeout(a.current),a.current=setTimeout(()=>{let{scrollX:e,scrollY:t}=r();i({scrollX:e,scrollY:t})},t?.eventListenerTimeoutMs||20)};return window.addEventListener(`scroll`,e,{passive:t?.passiveEventListener}),o.current=!0,()=>{o&&window.removeEventListener(`scroll`,e)}},[]),n}export{t as AtomTrigger,n as log,o as useContainerScroll,a as useWindowDimensions,s as useWindowScroll};