react-load-on-view/dist/index.es.js

React Higher-Order Component (HOC) that tracks UI elements to dynamically fetch data, load images, or trigger animations based on visibility.

import r,{useState as e,useEffect as t,useRef as n}from"react";const a=import.meta.glob("/src/assets/**/*");function o(r,n){const[o,i]=e({}),[s,c]=e(""),[l,u]=e(!1),[g,d]=e(!1),f=n&&Array.isArray(r)&&r.length>0&&!g;return t((()=>{if(!f)return;let e=!0;return(async()=>{u(!0),c("");try{const t=await async function(r){return Promise.all(r.map((async r=>{if(!a[r])throw new Error(`${r} not found`);const e=await a[r]();return"string"==typeof e.default&&/\.(jpg|jpeg|png|gif|webp|svg)$/i.test(e.default)?{src:e.default}:e.default||e})))}(r);e&&(!function(r,e){r.every((r=>r&&r.src))?e({images:r}):e(function(r){return r.reduce(((r,e)=>(e&&e.src?(r.images=r.images||[],r.images.push(e)):"object"==typeof e&&(r={...r,...e}),r)),{})}(r))}(t,i),d(!0))}catch(r){e&&function(r,e,t){r(t.message||"Failed to load data"),e({})}(c,i,r)}finally{e&&u(!1)}})(),()=>{e=!1}}),[r,n,g]),{data:o,error:s,loading:l}}function i({rootMargin:r="0px",threshold:a=0,triggerOnce:o=!0,root:i=null}={}){const[s,c]=e(!1),[l,u]=e(null),g=n(null);return t((()=>{let e=!0;const t=new IntersectionObserver((([r])=>{e&&(u(r),c(r.isIntersecting),r.isIntersecting&&o&&t.disconnect())}),{root:i,rootMargin:r,threshold:a}),n=g.current;return n&&t.observe(n),()=>{e=!1,n&&t.unobserve(n),t.disconnect()}}),[r,a,o,i]),{ref:g,inView:s}}function s(e,{animate:t=!1,afterWrapperIsVisibleClass:n="visible_wrapper",initialWrapperClass:a=(t?"invisible_wrapper":""),rootMargin:s="0px",threshold:c=0,root:l=null,triggerOnce:u=!0,lazyLoad:g=!1,paths:d=[]}={}){return function(f){const{ref:p,inView:m}=i({rootMargin:s,threshold:c,root:l,triggerOnce:u}),{data:h,error:y,loading:w}=g?o(d,m):{data:{},error:"",loading:!1},b=g?{...f,data:h,error:y,loading:w}:f,v=t&&m?f.special_animation||n:a;return r.createElement("div",{ref:p,className:v},r.createElement(e,b))}}export{i as useElementObserver,o as useLazyLoadAssets,s as withViewObserver};