react-atom-trigger 2.1.0 → 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +37 -4
- package/lib/index.js +1 -1
- package/lib/index.umd.js +1 -1
- package/package.json +14 -7
package/README.md
CHANGED
|
@@ -3,8 +3,20 @@
|
|
|
3
3
|
[](https://codecov.io/gh/innrvoice/react-atom-trigger)
|
|
4
4
|
[](https://app.codecov.io/github/innrvoice/react-atom-trigger/bundles/master/react-atom-trigger-esm)
|
|
5
5
|
|
|
6
|
-
`react-atom-trigger` helps with the usual "run some code when this thing enters or leaves view" problem.
|
|
7
|
-
|
|
6
|
+
`react-atom-trigger` helps with the usual "run some code when this thing enters or leaves view" problem in React.
|
|
7
|
+
|
|
8
|
+
It is designed for scroll-triggered UI and viewport-based interactions, focusing on predictable enter/leave behavior in real layouts where scroll, resize and layout shifts all affect visibility.
|
|
9
|
+
|
|
10
|
+
It is a lightweight React alternative to `react-waypoint`.
|
|
11
|
+
|
|
12
|
+
It can also be used as a higher-level alternative to React Intersection Observer based solutions when you need more predictable scroll-trigger behavior.
|
|
13
|
+
|
|
14
|
+
## Typical use cases
|
|
15
|
+
|
|
16
|
+
- scroll-driven UI (sticky headers, scene transitions)
|
|
17
|
+
- triggering animations with precise timing
|
|
18
|
+
- layouts with dynamic content or frequent reflows
|
|
19
|
+
- containers with custom scroll roots
|
|
8
20
|
|
|
9
21
|
## Breaking changes
|
|
10
22
|
|
|
@@ -50,7 +62,7 @@ The public React compatibility contract for `v2` is the published peer range: Re
|
|
|
50
62
|
`react-atom-trigger` uses a mixed approach.
|
|
51
63
|
|
|
52
64
|
- Geometry is the real source of truth for `enter` and `leave`.
|
|
53
|
-
- `IntersectionObserver` is only there to wake things up when the browser notices a nearby layout shift.
|
|
65
|
+
- `IntersectionObserver` is only there to wake things up when the browser notices a nearby layout shift. You can think of it as: IntersectionObserver wakes things up, geometry decides what actually happened.
|
|
54
66
|
- `rootMargin` logic is handled by the library itself, so it stays consistent and does not depend on native observer quirks.
|
|
55
67
|
|
|
56
68
|
In practice this means `AtomTrigger` reacts to:
|
|
@@ -61,7 +73,28 @@ In practice this means `AtomTrigger` reacts to:
|
|
|
61
73
|
- sentinel resize
|
|
62
74
|
- nearby layout shifts that move the observed element even if no scroll event happened
|
|
63
75
|
|
|
64
|
-
This
|
|
76
|
+
This allows it to support margin-aware behavior while still reacting to browser-driven changes.
|
|
77
|
+
|
|
78
|
+
## When to use vs react-intersection-observer
|
|
79
|
+
|
|
80
|
+
`react-intersection-observer` is a lightweight React wrapper around the browser’s IntersectionObserver API.
|
|
81
|
+
|
|
82
|
+
It is a great fit when:
|
|
83
|
+
|
|
84
|
+
- you only need to know if something is visible
|
|
85
|
+
- async observer timing is acceptable
|
|
86
|
+
- you want a simple hook like `useInView`
|
|
87
|
+
|
|
88
|
+
However, IntersectionObserver is designed as an asynchronous visibility signal managed by the browser. It does not provide exact geometry-based control over enter/leave transitions.
|
|
89
|
+
|
|
90
|
+
In fast scroll or layout-heavy UIs, this can lead to missed intermediate states or non-intuitive enter/leave timing.
|
|
91
|
+
|
|
92
|
+
Use `react-atom-trigger` when:
|
|
93
|
+
|
|
94
|
+
- you need predictable enter/leave behavior
|
|
95
|
+
- layout shifts should be handled consistently
|
|
96
|
+
- margins and thresholds must behave the same across cases
|
|
97
|
+
- visibility should be derived from actual element geometry rather than observer callbacks
|
|
65
98
|
|
|
66
99
|
## Quick start
|
|
67
100
|
|
package/lib/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"react";function t(e){return!!(e&&typeof e==`object`&&`nodeType`in e&&e.nodeType===1&&`getBoundingClientRect`in e&&typeof e.getBoundingClientRect==`function`&&`addEventListener`in e&&typeof e.addEventListener==`function`&&`removeEventListener`in e&&typeof e.removeEventListener==`function`)}function n(e){return!!(e&&typeof e==`object`&&`window`in e&&e.window===e)}function r(e,t){if(e){if(typeof e==`function`){e(t);return}e.current=t}}function i(e){if(!e||typeof e!=`object`&&typeof e!=`function`)return;let t=Object.getOwnPropertyDescriptor(e,`ref`);if(!(!t||!(`value`in t)))return t.value}function a(e){if(!e)return;let t=i(e.props);return t===void 0?i(e):t}function o(t,n,r){return t?n===1?r?r.type===e.Fragment?`fragmentChild`:null:`invalidChildElement`:`invalidChildCount`:null}function s({originalChildRef:n,hasObservedChild:i,invalidChildWarning:a,shouldWarnAboutMissingDomRef:o}){let[s,c]=e.useState(null),l=e.useRef(null),u=e.useCallback(()=>{l.current=null,c(e=>e===null?e:null)},[]),d=e.useCallback(e=>{if(r(n,e),e===null){u();return}if(t(e)){l.current=e,c(t=>t===e?t:e);return}u()},[u,n]);return e.useEffect(()=>{if(typeof window>`u`||!(i&&!a&&!s&&o))return;let e=window.setTimeout(()=>{l.current},16);return()=>{window.clearTimeout(e)}},[i,a,s,o]),{childNode:s,attachObservedChildRef:d}}function c(e){return Array.isArray(e)&&e.length===4&&e.every(e=>typeof e==`number`&&Number.isFinite(e))}function l(e){return typeof e==`string`?e:c(e)?e.map(e=>`${Object.is(e,-0)?0:e}px`).join(` `):`0px`}function u(e,t){let n=e.trim();if(/^[+-]?0(?:\.0+)?$/.test(n))return 0;let r=n.match(/^([+-]?(?:\d+\.?\d*|\.\d+))(px|%)$/);if(!r)return 0;let[,i,a]=r,o=Number.parseFloat(i);return a===`%`?o/100*t:o}function d(e,t,n){let r=e.trim().split(/\s+/).filter(Boolean);if(r.length>4)return{top:0,right:0,bottom:0,left:0};let[i=`0px`,a=i,o=i,s=a]=r;return{top:u(i,n),right:u(a,t),bottom:u(o,n),left:u(s,t)}}function f(e,t){let n=d(t,e.width,e.height);return new DOMRect(e.left-n.left,e.top-n.top,e.width+n.left+n.right,e.height+n.top+n.bottom)}function p(e){let t=e.width>0?e.width:1,n=e.height>0?e.height:1;return t===e.width&&n===e.height?e:new DOMRect(e.left,e.top,t,n)}function m(e,t){let n=Math.max(e.left,t.left),r=Math.max(e.top,t.top),i=Math.min(e.right,t.right),a=Math.min(e.bottom,t.bottom);return i<=n||a<=r?new DOMRect(0,0,0,0):new DOMRect(n,r,i-n,a-r)}function h(e,t){let n=e.width*e.height;return n<=0?0:t.width*t.height/n}function g(e){return Math.min(1,Math.max(0,e))}function _(e){return
|
|
1
|
+
import e from"react";function t(e){return!!(e&&typeof e==`object`&&`nodeType`in e&&e.nodeType===1&&`getBoundingClientRect`in e&&typeof e.getBoundingClientRect==`function`&&`addEventListener`in e&&typeof e.addEventListener==`function`&&`removeEventListener`in e&&typeof e.removeEventListener==`function`)}function n(e){return!!(e&&typeof e==`object`&&`window`in e&&e.window===e)}function r(e,t){if(e){if(typeof e==`function`){e(t);return}e.current=t}}function i(e){if(!e||typeof e!=`object`&&typeof e!=`function`)return;let t=Object.getOwnPropertyDescriptor(e,`ref`);if(!(!t||!(`value`in t)))return t.value}function a(e){if(!e)return;let t=i(e.props);return t===void 0?i(e):t}function o(t,n,r){return t?n===1?r?r.type===e.Fragment?`fragmentChild`:null:`invalidChildElement`:`invalidChildCount`:null}function s({originalChildRef:n,hasObservedChild:i,invalidChildWarning:a,shouldWarnAboutMissingDomRef:o}){let[s,c]=e.useState(null),l=e.useRef(null),u=e.useCallback(()=>{l.current=null,c(e=>e===null?e:null)},[]),d=e.useCallback(e=>{if(r(n,e),e===null){u();return}if(t(e)){l.current=e,c(t=>t===e?t:e);return}u()},[u,n]);return e.useEffect(()=>{if(typeof window>`u`||!(i&&!a&&!s&&o))return;let e=window.setTimeout(()=>{l.current},16);return()=>{window.clearTimeout(e)}},[i,a,s,o]),{childNode:s,attachObservedChildRef:d}}function c(e){return Array.isArray(e)&&e.length===4&&e.every(e=>typeof e==`number`&&Number.isFinite(e))}function l(e){return typeof e==`string`?e:c(e)?e.map(e=>`${Object.is(e,-0)?0:e}px`).join(` `):`0px`}function u(e,t){let n=e.trim();if(/^[+-]?0(?:\.0+)?$/.test(n))return 0;let r=n.match(/^([+-]?(?:\d+\.?\d*|\.\d+))(px|%)$/);if(!r)return 0;let[,i,a]=r,o=Number.parseFloat(i);return a===`%`?o/100*t:o}function d(e,t,n){let r=e.trim().split(/\s+/).filter(Boolean);if(r.length>4)return{top:0,right:0,bottom:0,left:0};let[i=`0px`,a=i,o=i,s=a]=r;return{top:u(i,n),right:u(a,t),bottom:u(o,n),left:u(s,t)}}function f(e,t){let n=d(t,e.width,e.height);return new DOMRect(e.left-n.left,e.top-n.top,e.width+n.left+n.right,e.height+n.top+n.bottom)}function p(e){let t=e.width>0?e.width:1,n=e.height>0?e.height:1;return t===e.width&&n===e.height?e:new DOMRect(e.left,e.top,t,n)}function m(e,t){let n=Math.max(e.left,t.left),r=Math.max(e.top,t.top),i=Math.min(e.right,t.right),a=Math.min(e.bottom,t.bottom);return i<=n||a<=r?new DOMRect(0,0,0,0):new DOMRect(n,r,i-n,a-r)}function h(e,t){let n=e.width*e.height;return n<=0?0:t.width*t.height/n}function g(e){return Math.min(1,Math.max(0,e))}function _(e){return e==null||typeof e!=`number`||!Number.isFinite(e)?0:g(e)}function v(e,t){if(!e)return`unknown`;let n=t.left-e.left,r=t.top-e.top;return n===0&&r===0?`stationary`:Math.abs(r)>=Math.abs(n)?r<0?`up`:`down`:n<0?`left`:`right`}function y(e){if(e.isIntersecting)return`inside`;let t=e.boundingClientRect,n=e.rootBounds?.top??0,r=e.rootBounds?.bottom??window.innerHeight,i=e.rootBounds?.left??0,a=e.rootBounds?.right??window.innerWidth;return t.bottom<=n?`above`:t.top>=r?`below`:t.right<=i?`left`:t.left>=a?`right`:`outside`}function b(e,t,n,r){return!(n&&t.entered+t.left>0||r&&(e===`enter`&&t.entered>0||e===`leave`&&t.left>0))}function x(e){return e.once?e.counts.entered+e.counts.left>0:e.oncePerDirection?e.counts.entered>0&&e.counts.left>0:!1}function S(e){e.previousTriggerActive=void 0,e.previousRect=null}function C(e,t,n,r){let i=p(e.node.getBoundingClientRect()),a=f(t,e.rootMargin),o=m(i,a),s=h(i,o),c=s>0,l=e.previousTriggerActive,u=l===!0||e.threshold===0?c:s>=e.threshold,d=e.previousRect&&(n===`root-change`||r)?`stationary`:v(e.previousRect,i);e.previousRect=i,e.previousTriggerActive=u;let g=Date.now(),_={target:e.node,rootBounds:a,boundingClientRect:i,intersectionRect:o,isIntersecting:c,intersectionRatio:s,source:`geometry`},S=l===void 0;if(S&&(!e.fireOnInitialVisible||!u)||l===u)return;let C=u?`enter`:`leave`;if(!b(C,e.counts,e.once,e.oncePerDirection))return;let w=C===`enter`?{...e.counts,entered:e.counts.entered+1}:{...e.counts,left:e.counts.left+1};e.counts=w;let T={type:C,isInitial:S,entry:_,counts:w,movementDirection:d,position:y(_),timestamp:g};e.onEvent?.(T),C===`enter`?e.onEnter?.(T):e.onLeave?.(T),x(e)&&e.unsubscribe?.()}const w=new WeakMap;function T(){return new DOMRect(0,0,window.innerWidth,window.innerHeight)}function E(e){return e===window||n(e)}function D(e){let t={registrations:new Set,rafId:0,pendingSampleCause:null,previousBaseRootBounds:null,resizeObserver:null,intersectionObserver:null,queueSample:()=>{},cleanup:()=>{}},n=()=>{if(t.rafId=0,t.registrations.size===0){t.pendingSampleCause=null;return}let n=t.pendingSampleCause??`geometry-change`;t.pendingSampleCause=null;let r=E(e)?T():e.getBoundingClientRect(),i=t.previousBaseRootBounds!==null&&(t.previousBaseRootBounds.top!==r.top||t.previousBaseRootBounds.left!==r.left||t.previousBaseRootBounds.width!==r.width||t.previousBaseRootBounds.height!==r.height);for(let e of t.registrations)C(e,r,n,i);t.previousBaseRootBounds=new DOMRect(r.left,r.top,r.width,r.height)},r=(e=`geometry-change`)=>{(t.pendingSampleCause===null||t.pendingSampleCause===`geometry-change`&&e!==`geometry-change`||t.pendingSampleCause===`root-change`&&e===`scroll`)&&(t.pendingSampleCause=e),t.rafId===0&&(t.rafId=window.requestAnimationFrame(()=>{t.rafId=0,n()}))},i=()=>{r(`scroll`)},a=()=>{r(`root-change`)};return e.addEventListener(`scroll`,i,{passive:!0}),window.addEventListener(`resize`,a),typeof ResizeObserver<`u`&&(t.resizeObserver=new ResizeObserver(a),E(e)||t.resizeObserver.observe(e)),typeof IntersectionObserver<`u`&&(t.intersectionObserver=new IntersectionObserver(()=>{r(`geometry-change`)},{root:E(e)?null:e,rootMargin:`200% 200% 200% 200%`,threshold:0})),t.queueSample=r,t.cleanup=()=>{t.rafId!==0&&(cancelAnimationFrame(t.rafId),t.rafId=0),e.removeEventListener(`scroll`,i),window.removeEventListener(`resize`,a),t.resizeObserver?.disconnect(),t.intersectionObserver?.disconnect(),t.pendingSampleCause=null,t.previousBaseRootBounds=null},t}function O(e){let t=w.get(e);if(t)return t;let n=D(e);return w.set(e,n),n}function k(e,t){let n=O(e),r=!1,i=t.node;n.registrations.add(t),n.resizeObserver?.observe(i),n.intersectionObserver?.observe(i),n.queueSample();let a=()=>{r||(r=!0,n.registrations.delete(t),n.resizeObserver?.unobserve(i),n.intersectionObserver?.unobserve(i),t.unsubscribe=void 0,n.registrations.size===0&&(n.cleanup(),w.delete(e)))};return t.unsubscribe=a,a}function A(e,t){return{...e,...t,previousTriggerActive:void 0,previousRect:null,counts:{entered:0,left:0}}}function j(e){e.unsubscribe?.(),e.unsubscribe=null,e.subscription=null}function M(e,t){return{registration:A(e,t),subscription:null,unsubscribe:null}}function N(e,t){e.registration.onEnter=t.onEnter,e.registration.onLeave=t.onLeave,e.registration.onEvent=t.onEvent}function P(e,t){let n=e.registration;if(!t.node){S(n),j(e);return}let r={node:t.node,rootMargin:t.rootMargin,threshold:t.threshold,once:t.once,oncePerDirection:t.oncePerDirection,fireOnInitialVisible:t.fireOnInitialVisible};if(t.disabled||!t.target){j(e),Object.assign(n,r),S(n);return}let i={...r,target:t.target};if(e.subscription!==null&&e.subscription.node===i.node&&e.subscription.target===i.target&&e.subscription.rootMargin===i.rootMargin&&e.subscription.threshold===i.threshold&&e.subscription.once===i.once&&e.subscription.oncePerDirection===i.oncePerDirection&&e.subscription.fireOnInitialVisible===i.fireOnInitialVisible){Object.assign(n,r);return}S(n),j(e),Object.assign(n,r),e.unsubscribe=k(t.target,n),e.subscription=i}function F(e){j(e)}function I(e){e.kind;let{target:n}=e;return n==null?null:t(n)?n:null}function L(t){let n=t!==void 0,[r,i]=e.useState(()=>n?t.current:null);return e.useEffect(()=>{if(!n)return;let e=t.current;i(t=>t===e?t:e)}),n?r:void 0}function R(e){switch(e.kind){case`rootRef`:case`root`:return I(e);case`viewport`:return typeof window>`u`?null:window}}const z={display:`table`},B=({onEnter:t,onLeave:n,onEvent:r,children:i,once:c=!1,oncePerDirection:u=!1,fireOnInitialVisible:d=!1,disabled:f=!1,threshold:p=0,root:m,rootRef:h,rootMargin:g=`0px`,className:v})=>{let y=e.useRef(null),b=e.useRef(null),x=L(h),S=l(g),C=_(p),w=i!=null,T=e.Children.count(i),E=T===1&&e.isValidElement(i)?i:null,D=o(w,T,E),O=D||!E?null:E,{childNode:k,attachObservedChildRef:A}=s({originalChildRef:a(O),hasObservedChild:w,invalidChildWarning:D,shouldWarnAboutMissingDomRef:O!==null});return e.useEffect(()=>{},[v,w]),e.useEffect(()=>{},[D]),e.useEffect(()=>{},[c,u]),e.useEffect(()=>{let e=b.current;e&&N(e,{onEnter:t,onLeave:n,onEvent:r})},[t,n,r]),e.useEffect(()=>{if(typeof window>`u`)return;let e=w?k:y.current,i=R(h===void 0?m===void 0?{kind:`viewport`}:{kind:`root`,target:m}:{kind:`rootRef`,target:x});if(!e){b.current&&P(b.current,{disabled:!1,node:null,target:i,rootMargin:S,threshold:C,once:c,oncePerDirection:u,fireOnInitialVisible:d});return}b.current||(b.current=M({node:e,rootMargin:S,threshold:C,once:c,oncePerDirection:u,fireOnInitialVisible:d},{onEnter:t,onLeave:n,onEvent:r})),P(b.current,{disabled:f,node:e,target:i,rootMargin:S,threshold:C,once:c,oncePerDirection:u,fireOnInitialVisible:d})},[f,S,C,c,u,d,k,m,h,x,w]),e.useEffect(()=>()=>{b.current&&(F(b.current),b.current=null)},[]),w?O?e.cloneElement(O,{ref:A}):e.createElement(e.Fragment,null,i):e.createElement(`div`,{ref:y,style:z,className:v})};export{B as AtomTrigger};
|
package/lib/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`)):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.reactAtomTrigger={},e.React))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=Object.create,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,c=(e,t,n,o)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=a(t),l=0,u=c.length,d;l<u;l++)d=c[l],!s.call(e,d)&&d!==n&&r(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(o=i(t,d))||o.enumerable});return e};t=((e,t,i)=>(i=e==null?{}:n(o(e)),c(t||!e||!e.__esModule?r(i,`default`,{value:e,enumerable:!0}):i,e)))(t);function l(e){return!!(e&&typeof e==`object`&&`nodeType`in e&&e.nodeType===1&&`getBoundingClientRect`in e&&typeof e.getBoundingClientRect==`function`&&`addEventListener`in e&&typeof e.addEventListener==`function`&&`removeEventListener`in e&&typeof e.removeEventListener==`function`)}function u(e){return!!(e&&typeof e==`object`&&`window`in e&&e.window===e)}function d(e,t){if(e){if(typeof e==`function`){e(t);return}e.current=t}}function f(e){if(!e||typeof e!=`object`&&typeof e!=`function`)return;let t=Object.getOwnPropertyDescriptor(e,`ref`);if(!(!t||!(`value`in t)))return t.value}function p(e){if(!e)return;let t=f(e.props);return t===void 0?f(e):t}function m(e,n,r){return e?n===1?r?r.type===t.default.Fragment?`fragmentChild`:null:`invalidChildElement`:`invalidChildCount`:null}function h({originalChildRef:e,hasObservedChild:n,invalidChildWarning:r,shouldWarnAboutMissingDomRef:i}){let[a,o]=t.default.useState(null),s=t.default.useRef(null),c=t.default.useCallback(()=>{s.current=null,o(e=>e===null?e:null)},[]),u=t.default.useCallback(t=>{if(d(e,t),t===null){c();return}if(l(t)){s.current=t,o(e=>e===t?e:t);return}c()},[c,e]);return t.default.useEffect(()=>{if(typeof window>`u`||!(n&&!r&&!a&&i))return;let e=window.setTimeout(()=>{s.current},16);return()=>{window.clearTimeout(e)}},[n,r,a,i]),{childNode:a,attachObservedChildRef:u}}function g(e){return Array.isArray(e)&&e.length===4&&e.every(e=>typeof e==`number`&&Number.isFinite(e))}function _(e){return typeof e==`string`?e:g(e)?e.map(e=>`${Object.is(e,-0)?0:e}px`).join(` `):`0px`}function v(e,t){let n=e.trim();if(/^[+-]?0(?:\.0+)?$/.test(n))return 0;let r=n.match(/^([+-]?(?:\d+\.?\d*|\.\d+))(px|%)$/);if(!r)return 0;let[,i,a]=r,o=Number.parseFloat(i);return a===`%`?o/100*t:o}function y(e,t,n){let r=e.trim().split(/\s+/).filter(Boolean);if(r.length>4)return{top:0,right:0,bottom:0,left:0};let[i=`0px`,a=i,o=i,s=a]=r;return{top:v(i,n),right:v(a,t),bottom:v(o,n),left:v(s,t)}}function b(e,t){let n=y(t,e.width,e.height);return new DOMRect(e.left-n.left,e.top-n.top,e.width+n.left+n.right,e.height+n.top+n.bottom)}function x(e){let t=e.width>0?e.width:1,n=e.height>0?e.height:1;return t===e.width&&n===e.height?e:new DOMRect(e.left,e.top,t,n)}function S(e,t){let n=Math.max(e.left,t.left),r=Math.max(e.top,t.top),i=Math.min(e.right,t.right),a=Math.min(e.bottom,t.bottom);return i<=n||a<=r?new DOMRect(0,0,0,0):new DOMRect(n,r,i-n,a-r)}function C(e,t){let n=e.width*e.height;return n<=0?0:t.width*t.height/n}function w(e){return Math.min(1,Math.max(0,e))}function T(e){return Array.isArray(e)?w(e.find(e=>typeof e==`number`&&Number.isFinite(e))??0):e==null||typeof e!=`number`||!Number.isFinite(e)?0:w(e)}function E(e,t){if(!e)return`unknown`;let n=t.left-e.left,r=t.top-e.top;return n===0&&r===0?`stationary`:Math.abs(r)>=Math.abs(n)?r<0?`up`:`down`:n<0?`left`:`right`}function D(e){if(e.isIntersecting)return`inside`;let t=e.boundingClientRect,n=e.rootBounds?.top??0,r=e.rootBounds?.bottom??window.innerHeight,i=e.rootBounds?.left??0,a=e.rootBounds?.right??window.innerWidth;return t.bottom<=n?`above`:t.top>=r?`below`:t.right<=i?`left`:t.left>=a?`right`:`outside`}function O(e,t,n,r){return!(n&&t.entered+t.left>0||r&&(e===`enter`&&t.entered>0||e===`leave`&&t.left>0))}function k(e){return e.once?e.counts.entered+e.counts.left>0:e.oncePerDirection?e.counts.entered>0&&e.counts.left>0:!1}function A(e){e.previousTriggerActive=void 0,e.previousRect=null}function j(e,t,n,r){let i=x(e.node.getBoundingClientRect()),a=b(t,e.rootMargin),o=S(i,a),s=C(i,o),c=s>0,l=e.previousTriggerActive,u=l===!0||e.threshold===0?c:s>=e.threshold,d=e.previousRect&&(n===`root-change`||r)?`stationary`:E(e.previousRect,i);e.previousRect=i,e.previousTriggerActive=u;let f=Date.now(),p={target:e.node,rootBounds:a,boundingClientRect:i,intersectionRect:o,isIntersecting:c,intersectionRatio:s,source:`geometry`},m=l===void 0;if(m&&(!e.fireOnInitialVisible||!u)||l===u)return;let h=u?`enter`:`leave`;if(!O(h,e.counts,e.once,e.oncePerDirection))return;let g=h===`enter`?{...e.counts,entered:e.counts.entered+1}:{...e.counts,left:e.counts.left+1};e.counts=g;let _={type:h,isInitial:m,entry:p,counts:g,movementDirection:d,position:D(p),timestamp:f};e.onEvent?.(_),h===`enter`?e.onEnter?.(_):e.onLeave?.(_),k(e)&&e.unsubscribe?.()}let M=new WeakMap;function N(){return new DOMRect(0,0,window.innerWidth,window.innerHeight)}function P(e){return e===window||u(e)}function F(e){let t={registrations:new Set,rafId:0,pendingSampleCause:null,previousBaseRootBounds:null,resizeObserver:null,intersectionObserver:null,queueSample:()=>{},cleanup:()=>{}},n=()=>{if(t.rafId=0,t.registrations.size===0){t.pendingSampleCause=null;return}let n=t.pendingSampleCause??`geometry-change`;t.pendingSampleCause=null;let r=P(e)?N():e.getBoundingClientRect(),i=t.previousBaseRootBounds!==null&&(t.previousBaseRootBounds.top!==r.top||t.previousBaseRootBounds.left!==r.left||t.previousBaseRootBounds.width!==r.width||t.previousBaseRootBounds.height!==r.height);for(let e of t.registrations)j(e,r,n,i);t.previousBaseRootBounds=new DOMRect(r.left,r.top,r.width,r.height)},r=(e=`geometry-change`)=>{(t.pendingSampleCause===null||t.pendingSampleCause===`geometry-change`&&e!==`geometry-change`||t.pendingSampleCause===`root-change`&&e===`scroll`)&&(t.pendingSampleCause=e),t.rafId===0&&(t.rafId=window.requestAnimationFrame(()=>{t.rafId=0,n()}))},i=()=>{r(`scroll`)},a=()=>{r(`root-change`)};return e.addEventListener(`scroll`,i,{passive:!0}),window.addEventListener(`resize`,a),typeof ResizeObserver<`u`&&(t.resizeObserver=new ResizeObserver(a),P(e)||t.resizeObserver.observe(e)),typeof IntersectionObserver<`u`&&(t.intersectionObserver=new IntersectionObserver(()=>{r(`geometry-change`)},{root:P(e)?null:e,rootMargin:`200% 200% 200% 200%`,threshold:0})),t.queueSample=r,t.cleanup=()=>{t.rafId!==0&&(cancelAnimationFrame(t.rafId),t.rafId=0),e.removeEventListener(`scroll`,i),window.removeEventListener(`resize`,a),t.resizeObserver?.disconnect(),t.intersectionObserver?.disconnect(),t.pendingSampleCause=null,t.previousBaseRootBounds=null},t}function I(e){let t=M.get(e);if(t)return t;let n=F(e);return M.set(e,n),n}function L(e,t){let n=I(e),r=!1,i=t.node;n.registrations.add(t),n.resizeObserver?.observe(i),n.intersectionObserver?.observe(i),n.queueSample();let a=()=>{r||(r=!0,n.registrations.delete(t),n.resizeObserver?.unobserve(i),n.intersectionObserver?.unobserve(i),t.unsubscribe=void 0,n.registrations.size===0&&(n.cleanup(),M.delete(e)))};return t.unsubscribe=a,a}function R(e,t){return{...e,...t,previousTriggerActive:void 0,previousRect:null,counts:{entered:0,left:0}}}function z(e){e.unsubscribe?.(),e.unsubscribe=null,e.subscription=null}function B(e,t){return{registration:R(e,t),subscription:null,unsubscribe:null}}function V(e,t){e.registration.onEnter=t.onEnter,e.registration.onLeave=t.onLeave,e.registration.onEvent=t.onEvent}function H(e,t){let n=e.registration;if(!t.node){A(n),z(e);return}let r={node:t.node,rootMargin:t.rootMargin,threshold:t.threshold,once:t.once,oncePerDirection:t.oncePerDirection,fireOnInitialVisible:t.fireOnInitialVisible};if(t.disabled||!t.target){z(e),Object.assign(n,r),A(n);return}let i={...r,target:t.target};if(e.subscription!==null&&e.subscription.node===i.node&&e.subscription.target===i.target&&e.subscription.rootMargin===i.rootMargin&&e.subscription.threshold===i.threshold&&e.subscription.once===i.once&&e.subscription.oncePerDirection===i.oncePerDirection&&e.subscription.fireOnInitialVisible===i.fireOnInitialVisible){Object.assign(n,r);return}A(n),z(e),Object.assign(n,r),e.unsubscribe=L(t.target,n),e.subscription=i}function U(e){z(e)}function W(e){e.kind;let{target:t}=e;return t==null?null:l(t)?t:null}function G(e){let n=e!==void 0,[r,i]=t.default.useState(()=>n?e.current:null);return t.default.useEffect(()=>{if(!n)return;let t=e.current;i(e=>e===t?e:t)}),n?r:void 0}function K(e){switch(e.kind){case`rootRef`:case`root`:return W(e);case`viewport`:return typeof window>`u`?null:window}}let q={display:`table`};e.AtomTrigger=({onEnter:e,onLeave:n,onEvent:r,children:i,once:a=!1,oncePerDirection:o=!1,fireOnInitialVisible:s=!1,disabled:c=!1,threshold:l=0,root:u,rootRef:d,rootMargin:f=`0px`,className:g})=>{let v=t.default.useRef(null),y=t.default.useRef(null),b=G(d),x=_(f),S=T(l),C=i!=null,w=t.default.Children.count(i),E=w===1&&t.default.isValidElement(i)?i:null,D=m(C,w,E),O=D||!E?null:E,{childNode:k,attachObservedChildRef:A}=h({originalChildRef:p(O),hasObservedChild:C,invalidChildWarning:D,shouldWarnAboutMissingDomRef:O!==null});return t.default.useEffect(()=>{},[g,C]),t.default.useEffect(()=>{},[D]),t.default.useEffect(()=>{},[a,o]),t.default.useEffect(()=>{let t=y.current;t&&V(t,{onEnter:e,onLeave:n,onEvent:r})},[e,n,r]),t.default.useEffect(()=>{if(typeof window>`u`)return;let t=C?k:v.current,i=K(d===void 0?u===void 0?{kind:`viewport`}:{kind:`root`,target:u}:{kind:`rootRef`,target:b});if(!t){y.current&&H(y.current,{disabled:!1,node:null,target:i,rootMargin:x,threshold:S,once:a,oncePerDirection:o,fireOnInitialVisible:s});return}y.current||(y.current=B({node:t,rootMargin:x,threshold:S,once:a,oncePerDirection:o,fireOnInitialVisible:s},{onEnter:e,onLeave:n,onEvent:r})),H(y.current,{disabled:c,node:t,target:i,rootMargin:x,threshold:S,once:a,oncePerDirection:o,fireOnInitialVisible:s})},[c,x,S,a,o,s,k,u,d,b,C]),t.default.useEffect(()=>()=>{y.current&&(U(y.current),y.current=null)},[]),C?O?t.default.cloneElement(O,{ref:A}):t.default.createElement(t.default.Fragment,null,i):t.default.createElement(`div`,{ref:v,style:q,className:g})}});
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`)):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.reactAtomTrigger={},e.React))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=Object.create,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,c=(e,t,n,o)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=a(t),l=0,u=c.length,d;l<u;l++)d=c[l],!s.call(e,d)&&d!==n&&r(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(o=i(t,d))||o.enumerable});return e};t=((e,t,i)=>(i=e==null?{}:n(o(e)),c(t||!e||!e.__esModule?r(i,`default`,{value:e,enumerable:!0}):i,e)))(t);function l(e){return!!(e&&typeof e==`object`&&`nodeType`in e&&e.nodeType===1&&`getBoundingClientRect`in e&&typeof e.getBoundingClientRect==`function`&&`addEventListener`in e&&typeof e.addEventListener==`function`&&`removeEventListener`in e&&typeof e.removeEventListener==`function`)}function u(e){return!!(e&&typeof e==`object`&&`window`in e&&e.window===e)}function d(e,t){if(e){if(typeof e==`function`){e(t);return}e.current=t}}function f(e){if(!e||typeof e!=`object`&&typeof e!=`function`)return;let t=Object.getOwnPropertyDescriptor(e,`ref`);if(!(!t||!(`value`in t)))return t.value}function p(e){if(!e)return;let t=f(e.props);return t===void 0?f(e):t}function m(e,n,r){return e?n===1?r?r.type===t.default.Fragment?`fragmentChild`:null:`invalidChildElement`:`invalidChildCount`:null}function h({originalChildRef:e,hasObservedChild:n,invalidChildWarning:r,shouldWarnAboutMissingDomRef:i}){let[a,o]=t.default.useState(null),s=t.default.useRef(null),c=t.default.useCallback(()=>{s.current=null,o(e=>e===null?e:null)},[]),u=t.default.useCallback(t=>{if(d(e,t),t===null){c();return}if(l(t)){s.current=t,o(e=>e===t?e:t);return}c()},[c,e]);return t.default.useEffect(()=>{if(typeof window>`u`||!(n&&!r&&!a&&i))return;let e=window.setTimeout(()=>{s.current},16);return()=>{window.clearTimeout(e)}},[n,r,a,i]),{childNode:a,attachObservedChildRef:u}}function g(e){return Array.isArray(e)&&e.length===4&&e.every(e=>typeof e==`number`&&Number.isFinite(e))}function _(e){return typeof e==`string`?e:g(e)?e.map(e=>`${Object.is(e,-0)?0:e}px`).join(` `):`0px`}function v(e,t){let n=e.trim();if(/^[+-]?0(?:\.0+)?$/.test(n))return 0;let r=n.match(/^([+-]?(?:\d+\.?\d*|\.\d+))(px|%)$/);if(!r)return 0;let[,i,a]=r,o=Number.parseFloat(i);return a===`%`?o/100*t:o}function y(e,t,n){let r=e.trim().split(/\s+/).filter(Boolean);if(r.length>4)return{top:0,right:0,bottom:0,left:0};let[i=`0px`,a=i,o=i,s=a]=r;return{top:v(i,n),right:v(a,t),bottom:v(o,n),left:v(s,t)}}function b(e,t){let n=y(t,e.width,e.height);return new DOMRect(e.left-n.left,e.top-n.top,e.width+n.left+n.right,e.height+n.top+n.bottom)}function x(e){let t=e.width>0?e.width:1,n=e.height>0?e.height:1;return t===e.width&&n===e.height?e:new DOMRect(e.left,e.top,t,n)}function S(e,t){let n=Math.max(e.left,t.left),r=Math.max(e.top,t.top),i=Math.min(e.right,t.right),a=Math.min(e.bottom,t.bottom);return i<=n||a<=r?new DOMRect(0,0,0,0):new DOMRect(n,r,i-n,a-r)}function C(e,t){let n=e.width*e.height;return n<=0?0:t.width*t.height/n}function w(e){return Math.min(1,Math.max(0,e))}function T(e){return e==null||typeof e!=`number`||!Number.isFinite(e)?0:w(e)}function E(e,t){if(!e)return`unknown`;let n=t.left-e.left,r=t.top-e.top;return n===0&&r===0?`stationary`:Math.abs(r)>=Math.abs(n)?r<0?`up`:`down`:n<0?`left`:`right`}function D(e){if(e.isIntersecting)return`inside`;let t=e.boundingClientRect,n=e.rootBounds?.top??0,r=e.rootBounds?.bottom??window.innerHeight,i=e.rootBounds?.left??0,a=e.rootBounds?.right??window.innerWidth;return t.bottom<=n?`above`:t.top>=r?`below`:t.right<=i?`left`:t.left>=a?`right`:`outside`}function O(e,t,n,r){return!(n&&t.entered+t.left>0||r&&(e===`enter`&&t.entered>0||e===`leave`&&t.left>0))}function k(e){return e.once?e.counts.entered+e.counts.left>0:e.oncePerDirection?e.counts.entered>0&&e.counts.left>0:!1}function A(e){e.previousTriggerActive=void 0,e.previousRect=null}function j(e,t,n,r){let i=x(e.node.getBoundingClientRect()),a=b(t,e.rootMargin),o=S(i,a),s=C(i,o),c=s>0,l=e.previousTriggerActive,u=l===!0||e.threshold===0?c:s>=e.threshold,d=e.previousRect&&(n===`root-change`||r)?`stationary`:E(e.previousRect,i);e.previousRect=i,e.previousTriggerActive=u;let f=Date.now(),p={target:e.node,rootBounds:a,boundingClientRect:i,intersectionRect:o,isIntersecting:c,intersectionRatio:s,source:`geometry`},m=l===void 0;if(m&&(!e.fireOnInitialVisible||!u)||l===u)return;let h=u?`enter`:`leave`;if(!O(h,e.counts,e.once,e.oncePerDirection))return;let g=h===`enter`?{...e.counts,entered:e.counts.entered+1}:{...e.counts,left:e.counts.left+1};e.counts=g;let _={type:h,isInitial:m,entry:p,counts:g,movementDirection:d,position:D(p),timestamp:f};e.onEvent?.(_),h===`enter`?e.onEnter?.(_):e.onLeave?.(_),k(e)&&e.unsubscribe?.()}let M=new WeakMap;function N(){return new DOMRect(0,0,window.innerWidth,window.innerHeight)}function P(e){return e===window||u(e)}function F(e){let t={registrations:new Set,rafId:0,pendingSampleCause:null,previousBaseRootBounds:null,resizeObserver:null,intersectionObserver:null,queueSample:()=>{},cleanup:()=>{}},n=()=>{if(t.rafId=0,t.registrations.size===0){t.pendingSampleCause=null;return}let n=t.pendingSampleCause??`geometry-change`;t.pendingSampleCause=null;let r=P(e)?N():e.getBoundingClientRect(),i=t.previousBaseRootBounds!==null&&(t.previousBaseRootBounds.top!==r.top||t.previousBaseRootBounds.left!==r.left||t.previousBaseRootBounds.width!==r.width||t.previousBaseRootBounds.height!==r.height);for(let e of t.registrations)j(e,r,n,i);t.previousBaseRootBounds=new DOMRect(r.left,r.top,r.width,r.height)},r=(e=`geometry-change`)=>{(t.pendingSampleCause===null||t.pendingSampleCause===`geometry-change`&&e!==`geometry-change`||t.pendingSampleCause===`root-change`&&e===`scroll`)&&(t.pendingSampleCause=e),t.rafId===0&&(t.rafId=window.requestAnimationFrame(()=>{t.rafId=0,n()}))},i=()=>{r(`scroll`)},a=()=>{r(`root-change`)};return e.addEventListener(`scroll`,i,{passive:!0}),window.addEventListener(`resize`,a),typeof ResizeObserver<`u`&&(t.resizeObserver=new ResizeObserver(a),P(e)||t.resizeObserver.observe(e)),typeof IntersectionObserver<`u`&&(t.intersectionObserver=new IntersectionObserver(()=>{r(`geometry-change`)},{root:P(e)?null:e,rootMargin:`200% 200% 200% 200%`,threshold:0})),t.queueSample=r,t.cleanup=()=>{t.rafId!==0&&(cancelAnimationFrame(t.rafId),t.rafId=0),e.removeEventListener(`scroll`,i),window.removeEventListener(`resize`,a),t.resizeObserver?.disconnect(),t.intersectionObserver?.disconnect(),t.pendingSampleCause=null,t.previousBaseRootBounds=null},t}function I(e){let t=M.get(e);if(t)return t;let n=F(e);return M.set(e,n),n}function L(e,t){let n=I(e),r=!1,i=t.node;n.registrations.add(t),n.resizeObserver?.observe(i),n.intersectionObserver?.observe(i),n.queueSample();let a=()=>{r||(r=!0,n.registrations.delete(t),n.resizeObserver?.unobserve(i),n.intersectionObserver?.unobserve(i),t.unsubscribe=void 0,n.registrations.size===0&&(n.cleanup(),M.delete(e)))};return t.unsubscribe=a,a}function R(e,t){return{...e,...t,previousTriggerActive:void 0,previousRect:null,counts:{entered:0,left:0}}}function z(e){e.unsubscribe?.(),e.unsubscribe=null,e.subscription=null}function B(e,t){return{registration:R(e,t),subscription:null,unsubscribe:null}}function V(e,t){e.registration.onEnter=t.onEnter,e.registration.onLeave=t.onLeave,e.registration.onEvent=t.onEvent}function H(e,t){let n=e.registration;if(!t.node){A(n),z(e);return}let r={node:t.node,rootMargin:t.rootMargin,threshold:t.threshold,once:t.once,oncePerDirection:t.oncePerDirection,fireOnInitialVisible:t.fireOnInitialVisible};if(t.disabled||!t.target){z(e),Object.assign(n,r),A(n);return}let i={...r,target:t.target};if(e.subscription!==null&&e.subscription.node===i.node&&e.subscription.target===i.target&&e.subscription.rootMargin===i.rootMargin&&e.subscription.threshold===i.threshold&&e.subscription.once===i.once&&e.subscription.oncePerDirection===i.oncePerDirection&&e.subscription.fireOnInitialVisible===i.fireOnInitialVisible){Object.assign(n,r);return}A(n),z(e),Object.assign(n,r),e.unsubscribe=L(t.target,n),e.subscription=i}function U(e){z(e)}function W(e){e.kind;let{target:t}=e;return t==null?null:l(t)?t:null}function G(e){let n=e!==void 0,[r,i]=t.default.useState(()=>n?e.current:null);return t.default.useEffect(()=>{if(!n)return;let t=e.current;i(e=>e===t?e:t)}),n?r:void 0}function K(e){switch(e.kind){case`rootRef`:case`root`:return W(e);case`viewport`:return typeof window>`u`?null:window}}let q={display:`table`};e.AtomTrigger=({onEnter:e,onLeave:n,onEvent:r,children:i,once:a=!1,oncePerDirection:o=!1,fireOnInitialVisible:s=!1,disabled:c=!1,threshold:l=0,root:u,rootRef:d,rootMargin:f=`0px`,className:g})=>{let v=t.default.useRef(null),y=t.default.useRef(null),b=G(d),x=_(f),S=T(l),C=i!=null,w=t.default.Children.count(i),E=w===1&&t.default.isValidElement(i)?i:null,D=m(C,w,E),O=D||!E?null:E,{childNode:k,attachObservedChildRef:A}=h({originalChildRef:p(O),hasObservedChild:C,invalidChildWarning:D,shouldWarnAboutMissingDomRef:O!==null});return t.default.useEffect(()=>{},[g,C]),t.default.useEffect(()=>{},[D]),t.default.useEffect(()=>{},[a,o]),t.default.useEffect(()=>{let t=y.current;t&&V(t,{onEnter:e,onLeave:n,onEvent:r})},[e,n,r]),t.default.useEffect(()=>{if(typeof window>`u`)return;let t=C?k:v.current,i=K(d===void 0?u===void 0?{kind:`viewport`}:{kind:`root`,target:u}:{kind:`rootRef`,target:b});if(!t){y.current&&H(y.current,{disabled:!1,node:null,target:i,rootMargin:x,threshold:S,once:a,oncePerDirection:o,fireOnInitialVisible:s});return}y.current||(y.current=B({node:t,rootMargin:x,threshold:S,once:a,oncePerDirection:o,fireOnInitialVisible:s},{onEnter:e,onLeave:n,onEvent:r})),H(y.current,{disabled:c,node:t,target:i,rootMargin:x,threshold:S,once:a,oncePerDirection:o,fireOnInitialVisible:s})},[c,x,S,a,o,s,k,u,d,b,C]),t.default.useEffect(()=>()=>{y.current&&(U(y.current),y.current=null)},[]),C?O?t.default.cloneElement(O,{ref:A}):t.default.createElement(t.default.Fragment,null,i):t.default.createElement(`div`,{ref:v,style:q,className:g})}});
|
package/package.json
CHANGED
|
@@ -1,15 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-atom-trigger",
|
|
3
|
-
"version": "2.1.
|
|
4
|
-
"description": "Geometry-based scroll trigger for React with
|
|
3
|
+
"version": "2.1.1",
|
|
4
|
+
"description": "Geometry-based scroll trigger for React with predictable enter/leave behavior. A modern alternative to react-waypoint and React Intersection Observer solutions.",
|
|
5
5
|
"keywords": [
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
6
|
+
"element visibility",
|
|
7
|
+
"in view",
|
|
8
|
+
"intersection observer",
|
|
9
9
|
"react",
|
|
10
|
+
"react intersection observer",
|
|
11
|
+
"react waypoint alternative",
|
|
10
12
|
"scroll",
|
|
11
|
-
"scroll
|
|
12
|
-
"
|
|
13
|
+
"scroll animation",
|
|
14
|
+
"scroll detection",
|
|
15
|
+
"scroll trigger",
|
|
16
|
+
"scroll-trigger",
|
|
17
|
+
"viewport",
|
|
18
|
+
"visibility",
|
|
19
|
+
"waypoint"
|
|
13
20
|
],
|
|
14
21
|
"homepage": "https://atomtrigger.dev",
|
|
15
22
|
"bugs": {
|