react-atom-trigger 1.0.8 → 1.0.9
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 +1 -1
- package/lib/index.es.js +1 -1
- package/lib/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -63,7 +63,7 @@ For someone who wants everything out-of-the-box, `useWindowDimensions`, `useWind
|
|
|
63
63
|
## Examples
|
|
64
64
|
It is sometimes better to tweak and see for yourself: [CodeSandbox examples](https://codesandbox.io/examples/package/react-atom-trigger).
|
|
65
65
|
|
|
66
|
-
[**More detailed react-atom-trigger overview**](https://visiofutura.com/solving-scroll-into-view-problem-in-react-my-way-a8056a1bdc11)
|
|
66
|
+
[**More detailed react-atom-trigger overview with examples**](https://visiofutura.com/solving-scroll-into-view-problem-in-react-my-way-a8056a1bdc11)
|
|
67
67
|
|
|
68
68
|
|
|
69
69
|
|
package/lib/index.es.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"react";
|
|
1
|
+
import e from"react";const t=({scrollEvent:t,callback:r,getDebugInfo:n,triggerOnce:o=!1,className:s,behavior:i="default",dimensions:c,offset:u=[0,0,0,0]})=>{const l=e.useRef(null),[f,a]=e.useState(),d=e.useRef(),[p,v]=e.useState({leftViewport:0,enteredViewport:0});return e.useLayoutEffect((()=>{if(l.current&&c){const e=l.current.getBoundingClientRect(),[t,r,n,o]=u;e.top>t&&e.bottom<c.height-n&&e.left>o&&e.right<c.width-r?a("inViewport"):e.top>c.height-n?a("bottom"):a("top")}}),[l,t,c,u]),e.useLayoutEffect((()=>{if(void 0===d.current&&void 0!==f&&(d.current=f),"inViewport"===f&&("bottom"===d.current||"top"===d.current)){if("enter"===i&&(!o||o&&p.enteredViewport)||"default"===i&&(!o||o&&(p.enteredViewport<1||p.leftViewport<1))){r&&r();const e={...p,enteredViewport:p.enteredViewport+1};n&&n({timesTriggered:e,trigger:"entered"}),v(e)}d.current=f}if(("top"===f||"bottom"===f)&&"inViewport"===d.current&&(d.current=f,"leave"===i&&(!o||o&&0===p.leftViewport)||"default"===i&&(!o||o&&(p.leftViewport<1||p.enteredViewport<1)))){r&&r();const e={...p,leftViewport:p.leftViewport+1};n&&n({timesTriggered:e,trigger:"left"}),v(e)}}),[f,r,o,i,n]),e.createElement("div",{ref:l,style:{display:"table"},className:s})};function r(e,t){"development"===process.env.NODE_ENV&&(t=t?`background: ${t}; color: #fff`:"background: #007700; color: #fff",console.group("%c log: "+e,t),console.groupEnd())}function n(){const{scrollX:e,scrollY:t}=window;return{scrollX:e,scrollY:t}}function o(){const{innerWidth:e,innerHeight:t}=window;return{width:e,height:t}}function s(t){const[r,n]=e.useState(null),s=e.useRef(null),i=e.useRef(!1),c=t?.eventListenerTimeoutMs||15;return e.useEffect((()=>{const e=o();function r(){s.current&&clearTimeout(s.current),s.current=setTimeout((()=>n(o())),c)}return n(e),window.addEventListener("resize",r,{passive:t?.passiveEventListener}),i.current=!0,()=>{i&&window.removeEventListener("resize",r)}}),[]),r}function i({containerRef:t,options:r}){const[o,s]=e.useState(n()),i=e.useRef(null),c=e.useRef(!1);return e.useEffect((()=>{const e=e=>{i.current&&clearTimeout(i.current),i.current=setTimeout((()=>{s({scrollX:e.target.scrollLeft,scrollY:e.target.scrollTop})}),r?.eventListenerTimeoutMs||15)},n=t?.current;return n&&(n&&!1===c.current&&n.addEventListener("scroll",e,{passive:r?.passiveEventListener}),c.current=!0),()=>{c&&n&&n.removeEventListener("scroll",e)}}),[t]),o}function c(t){const[r,o]=e.useState(n()),s=e.useRef(null),i=e.useRef(!1);return e.useEffect((()=>{const e=()=>{s.current&&clearTimeout(s.current),s.current=setTimeout((()=>{const{scrollX:e,scrollY:t}=n();o({scrollX:e,scrollY:t})}),t?.eventListenerTimeoutMs||20)};return window.addEventListener("scroll",e,{passive:t?.passiveEventListener}),i.current=!0,()=>{i&&window.removeEventListener("scroll",e)}}),[]),r}export{t as AtomTrigger,r as log,i as useContainerScroll,s as useWindowDimensions,c as useWindowScroll};
|
package/lib/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["react-atom-trigger"]={},e.React)}(this,(function(e,t){"use strict";
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["react-atom-trigger"]={},e.React)}(this,(function(e,t){"use strict";function r(){const{scrollX:e,scrollY:t}=window;return{scrollX:e,scrollY:t}}function n(){const{innerWidth:e,innerHeight:t}=window;return{width:e,height:t}}e.AtomTrigger=({scrollEvent:e,callback:r,getDebugInfo:n,triggerOnce:o=!1,className:i,behavior:s="default",dimensions:c,offset:u=[0,0,0,0]})=>{const l=t.useRef(null),[f,d]=t.useState(),a=t.useRef(),[p,g]=t.useState({leftViewport:0,enteredViewport:0});return t.useLayoutEffect((()=>{if(l.current&&c){const e=l.current.getBoundingClientRect(),[t,r,n,o]=u;e.top>t&&e.bottom<c.height-n&&e.left>o&&e.right<c.width-r?d("inViewport"):e.top>c.height-n?d("bottom"):d("top")}}),[l,e,c,u]),t.useLayoutEffect((()=>{if(void 0===a.current&&void 0!==f&&(a.current=f),"inViewport"===f&&("bottom"===a.current||"top"===a.current)){if("enter"===s&&(!o||o&&p.enteredViewport)||"default"===s&&(!o||o&&(p.enteredViewport<1||p.leftViewport<1))){r&&r();const e={...p,enteredViewport:p.enteredViewport+1};n&&n({timesTriggered:e,trigger:"entered"}),g(e)}a.current=f}if(("top"===f||"bottom"===f)&&"inViewport"===a.current&&(a.current=f,"leave"===s&&(!o||o&&0===p.leftViewport)||"default"===s&&(!o||o&&(p.leftViewport<1||p.enteredViewport<1)))){r&&r();const e={...p,leftViewport:p.leftViewport+1};n&&n({timesTriggered:e,trigger:"left"}),g(e)}}),[f,r,o,s,n]),t.createElement("div",{ref:l,style:{display:"table"},className:i})},e.log=function(e,t){"development"===process.env.NODE_ENV&&(t=t?`background: ${t}; color: #fff`:"background: #007700; color: #fff",console.group("%c log: "+e,t),console.groupEnd())},e.useContainerScroll=function({containerRef:e,options:n}){const[o,i]=t.useState(r()),s=t.useRef(null),c=t.useRef(!1);return t.useEffect((()=>{const t=e=>{s.current&&clearTimeout(s.current),s.current=setTimeout((()=>{i({scrollX:e.target.scrollLeft,scrollY:e.target.scrollTop})}),n?.eventListenerTimeoutMs||15)},r=e?.current;return r&&(r&&!1===c.current&&r.addEventListener("scroll",t,{passive:n?.passiveEventListener}),c.current=!0),()=>{c&&r&&r.removeEventListener("scroll",t)}}),[e]),o},e.useWindowDimensions=function(e){const[r,o]=t.useState(null),i=t.useRef(null),s=t.useRef(!1),c=e?.eventListenerTimeoutMs||15;return t.useEffect((()=>{const t=n();function r(){i.current&&clearTimeout(i.current),i.current=setTimeout((()=>o(n())),c)}return o(t),window.addEventListener("resize",r,{passive:e?.passiveEventListener}),s.current=!0,()=>{s&&window.removeEventListener("resize",r)}}),[]),r},e.useWindowScroll=function(e){const[n,o]=t.useState(r()),i=t.useRef(null),s=t.useRef(!1);return t.useEffect((()=>{const t=()=>{i.current&&clearTimeout(i.current),i.current=setTimeout((()=>{const{scrollX:e,scrollY:t}=r();o({scrollX:e,scrollY:t})}),e?.eventListenerTimeoutMs||20)};return window.addEventListener("scroll",t,{passive:e?.passiveEventListener}),s.current=!0,()=>{s&&window.removeEventListener("scroll",t)}}),[]),n}}));
|