UNPKG

@studio-lumio/hooks

Version:

a compilation of react hooks we use to make our magic

3 lines (2 loc) 13.5 kB
import{useState as e,useEffect as n,useMemo as t,useLayoutEffect as r,useRef as o,useCallback as i}from"react";import{raf as c}from"@studio-freight/tempus";import u from"js-cookie";function s(e,n,t="mousedown"){b(t,t=>{const r=null==e?void 0:e.current;r&&!r.contains(t.target)&&n(t)})}function d(){const[t,r]=e(!1);return n(()=>{r(!0)},[]),t}function a(){const e=d();return t(()=>e&&(window.location.href.includes("#debug")||"development"===process.env.NODE_ENV)&&!window.location.href.includes("#production"),[e])}function l(){const[t,r]=e(()=>"undefined"!=typeof document?document.readyState:"loading");return n(()=>{if("undefined"!=typeof document)return r(document.readyState),document.addEventListener("readystatechange",e,!1),()=>document.removeEventListener("readystatechange",e,!1);function e(){r(document.readyState)}},[]),t}function m(e,t=0){n(()=>{if(e)return c.add(e,t),()=>c.remove(e)},[e,t])}const w="undefined"!=typeof window?r:n;function v(e,t){const r=o(e);w(()=>{r.current=e},[e]),n(()=>{if(!t&&0!==t)return;const e=setInterval(()=>r.current(),t);return()=>clearInterval(e)},[t])}const f=()=>{const[t,r]=e(!1),o=i(()=>{let e=!1;if("maxTouchPoints"in navigator)e=navigator.maxTouchPoints>0;else{const n=window.matchMedia("(pointer:coarse)");if(n&&"(pointer:coarse)"===n.media)e=!!n.matches;else{const n=window.navigator.userAgent;e=/\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(n)||/\b(Android|Windows Phone|iPad|iPod)\b/i.test(n)}}r(!!e)},[]),c=i(()=>{o()},[o]);return n(()=>(c(),window.addEventListener("resize",c,{passive:!0}),()=>{window.removeEventListener("resize",c)}),[c]),t};function h({root:t=null,rootMargin:r="0px",threshold:c=1,once:u=!1}){const s=o(null),d=o(null),[a,l]=e(!1),m=i(e=>{d.current||(d.current=e)},[]),w=i(e=>{if(0===e.length)return;const[n]=e;l(n.isIntersecting)},[]);return n(()=>(d.current&&(s.current=new IntersectionObserver(w,{root:t,rootMargin:r,threshold:c}),s.current.observe(d.current)),()=>{s.current&&s.current.disconnect()}),[w]),n(()=>{u&&a&&s.current.disconnect()},[a]),{setRef:m,inView:a}}function g(r){const o=d(),c=t(()=>{if(o)try{return window.matchMedia(r)}catch(e){"production"!==process.env.NODE_ENV&&console.error(e)}return null},[r,o]),[u,s]=e(void 0),a=i(({matches:e})=>{s(e)},[]);return n(()=>{if(c)return a(c),c.addEventListener("change",a,{passive:!0}),()=>{c.removeEventListener("change",a)}},[c,a,o]),u}const p=n=>{const[t,o]=e(y(n?n.current:null)),c=i(()=>{n.current&&o(y(n.current))},[n]);return r(()=>{const e=n.current;if(e){if(c(),"function"==typeof ResizeObserver){let n=new ResizeObserver(()=>c());return n.observe(e),()=>{n&&(n.disconnect(),n=null)}}return window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)}}},[n.current]),t};function y(e){return e?e.getBoundingClientRect():{bottom:0,height:0,left:0,right:0,top:0,width:0}}function E(e=[],n=[]){const r=t(()=>n&&[n].flat(),[n]),o=t(()=>e&&[e].flat(),[e]);return t(()=>{if(!r||!o)return;const n=o.map(e=>{var n;return null==(n=r.find(n=>n.type===e))?void 0:n.props.children});return e[0]?n:n[0]},[r,o])}function b(e,t,r,i){const c=o(t);w(()=>{c.current=t},[t]),n(()=>{var n;const t=null!=(n=null==r?void 0:r.current)?n:window;if(!t||!t.addEventListener)return;const o=e=>c.current(e);return t.addEventListener(e,o,i),()=>{t.removeEventListener(e,o,i)}},[e,r,i])}const L=()=>{const[n,t]=e({width:0,height:0}),r=()=>{t({width:window.innerWidth,height:window.innerHeight})};return b("resize",r),w(()=>{r()},[]),n};function T({root:t=null,rootMargin:r="0px",threshold:c=0,once:u=!1,lazy:s=!1,callback:d=(()=>{})}={},a=[]){const l=o(),[m,w]=e(),[v,f]=e(null);n(()=>{if(!v)return;const e=new IntersectionObserver(([n])=>{s?l.current=n:w(n),d(n),u&&n.isIntersecting&&e.disconnect()},{root:t,rootMargin:r,threshold:c});return e.observe(v),()=>{e.disconnect()}},[v,t,r,c,s,u,...a]);const h=i(()=>l.current,[]);return[f,s?h:m]}function S(){const[n,t]=e(null);return[n,async(e,n)=>{var r;if(null==(r=navigator)||!r.clipboard)return console.warn("Clipboard not supported"),!1;try{return await navigator.clipboard.writeText(e),t(e),n(),!0}catch(e){return console.warn("Copy failed",e),t(null),!1}}]}function x(t,r){const[o,i]=e(t);return n(()=>{const e=setTimeout(()=>i(t),r||500);return()=>{clearTimeout(e)}},[t,r]),o}const k=t=>{const r=o(t),i=o(),c=o(!1),u=o(!1),[,s]=e(0);c.current&&(u.current=!0),n(()=>(c.current||(i.current=r.current(),c.current=!0),s(e=>e+1),()=>{u.current&&i.current&&i.current()}),[])};function N(){const e=o(!0);return e.current?(e.current=!1,!0):e.current}const O=(e,t)=>{const r=N();n(()=>{if(!r)return e()},t)};function A(){const e=o(!1),t=i(()=>e.current,[]);return n(()=>(e.current=!0,()=>{e.current=!1}),[]),t}function z(n,t){const[r,o]=e(()=>{if("undefined"==typeof window)return t;try{const e=window.localStorage.getItem(n);return e?JSON.parse(e):t}catch(e){return console.log(e),t}});return[r,e=>{try{const t=e instanceof Function?e(r):e;o(t),"undefined"!=typeof window&&window.localStorage.setItem(n,JSON.stringify(t))}catch(e){console.log(e)}},()=>{try{"undefined"!=typeof window&&window.localStorage.removeItem(n)}catch(e){console.log(e)}}]}function I(n,t){const[r,o]=e(()=>{if("undefined"==typeof window)return t;try{const e=window.sessionStorage.getItem(n);return e?JSON.parse(e):t}catch(e){return console.log(e),t}});return[r,e=>{try{const t=e instanceof Function?e(r):e;o(t),"undefined"!=typeof window&&window.sessionStorage.setItem(n,JSON.stringify(t))}catch(e){console.log(e)}},()=>{try{"undefined"!=typeof window&&window.sessionStorage.removeItem(n)}catch(e){console.log(e)}}]}const P=()=>n(()=>{console.debug("WARNING: Still using FOUC temp fix on route change. Has the Next.js bug not been fixed? See https://github.com/vercel/next.js/issues/17464");let e=Array.from(document.querySelectorAll('link[rel="stylesheet"][data-n-p]')).map(e=>({element:e,href:e.getAttribute("href")}));e.forEach(({element:e})=>e.removeAttribute("data-n-p"));const n=[],t=new MutationObserver(t=>{t.filter(({target:e})=>"STYLE"===e.nodeName&&e.hasAttribute("data-n-href")).map(({target:e})=>({element:e,href:e.getAttribute("data-n-href")})).forEach(({element:e,href:t})=>{n.includes(t)?e.remove():(e.setAttribute("data-fouc-fix-n-href",t),e.removeAttribute("data-n-href"),n.push(t))}),e=e.reduce((e,t)=>{const{element:r,href:o}=t;return n.includes(o)?r.remove():e.push(t),e},[])});return t.observe(document.head,{subtree:!0,attributeFilter:["media"]}),()=>t.disconnect()},[]),C=()=>{const[t,r]=e();return n(()=>{const e=window.navigator?window.navigator.userAgent:"",n=e.match(/iPad/i)||e.match(/iPhone/i),t=e.match(/WebKit/i),o=n&&t&&!e.match(/CriOS/i),i=window.innerHeight;function c(){const e=window.innerHeight;r(!(e-50>i))}if(o){if(!("standalone"in window.navigator)||!window.navigator.standalone)return document.addEventListener("scroll",c),()=>{document.removeEventListener("scroll",c)};r(!1)}},[]),{isVisible:t}},M=e=>{n(()=>{const n=document.createElement("script");return n.src=e,n.async=!0,document.body.appendChild(n),()=>{document.body.removeChild(n)}},[e])},D=({sequence:e,callback:n})=>(function(t){const r=t&&t.eventType||"keydown",o=t&&t.keystrokeDelay||1e3;let i=[],c=Date.now();document.addEventListener(r,t=>{const r=t.key.toLowerCase(),u=Date.now();u-c>o&&(i=[]),i.push(r),c=u,e===i.join("")&&n()})}({eventType:"keydown",keystrokeDelay:1e3}),null);function H(e){n(()=>{const n=document.querySelector("link[rel*='icon']")||document.createElement("link");n.type="image/x-icon",n.rel="shortcut icon",n.href=e,document.getElementsByTagName("head")[0].appendChild(n)},[e])}function R(t=6e4){const[r,o]=e(!1);return n(()=>{let e;const n=()=>{o(!0)},r=function(e,n){let t=0;return()=>{const n=Date.now();n-t>=500&&(e(),t=n)}}(()=>{o(!1),window.clearTimeout(e),e=window.setTimeout(n,t)}),i=()=>{document.hidden||r()};return e=window.setTimeout(n,t),window.addEventListener("mousemove",r),window.addEventListener("mousedown",r),window.addEventListener("resize",r),window.addEventListener("keydown",r),window.addEventListener("touchstart",r),window.addEventListener("wheel",r),document.addEventListener("visibilitychange",i),()=>{window.removeEventListener("mousemove",r),window.removeEventListener("mousedown",r),window.removeEventListener("resize",r),window.removeEventListener("keydown",r),window.removeEventListener("touchstart",r),window.removeEventListener("wheel",r),document.removeEventListener("visibilitychange",i),window.clearTimeout(e)}},[t]),r}function W(e){n(()=>{document.title=e},[e])}function j(){const[t,r]=e(!1),i=o(null);return n(()=>{const e=i.current;if(!e)return;const n=()=>{r(!0)},t=()=>{r(!1)};return e.addEventListener("mouseenter",n),e.addEventListener("mouseleave",t),()=>{e.removeEventListener("mouseenter",n),e.removeEventListener("mouseleave",t)}},[]),[i,t]}const B=(e,t=[])=>{n(()=>{if(!e)return;const n=n=>{const t=(n=n||window.event).relatedTarget||n.toElement;t&&"HTML"!==t.nodeName||e()};return function(e,...n){e&&e.addEventListener&&e.addEventListener(...n)}(document,"mouseout",n),()=>{!function(e,...n){e&&e.removeEventListener&&e.removeEventListener(...n)}(document,"mouseout",n)}},t)},F=()=>{const[t,r]=e(!document.hidden);return n(()=>{const e=()=>{r(!document.hidden)};return document.addEventListener("visibilitychange",e),()=>{document.removeEventListener("visibilitychange",e)}},[]),t};function J(){const[n,t]=e({angle:0,type:"landscape-primary"});return r(()=>{var e;const n=()=>{const{angle:e,type:n}=window.screen.orientation;t({angle:e,type:n})},r=()=>{t({type:"UNKNOWN",angle:window.orientation})};return null!=(e=window.screen)&&e.orientation?(n(),window.screen.orientation.addEventListener("change",n)):(r(),window.addEventListener("orientationchange",r)),()=>{var e;null!=(e=window.screen)&&e.orientation?window.screen.orientation.removeEventListener("change",n):window.removeEventListener("orientationchange",r)}},[]),n}function V(n=[]){const[t,r]=e(n);return[t,{set:i(e=>{r(e)},[]),push:i(e=>{r(n=>[...n,e])},[]),removeAt:i(e=>{r(n=>[...n.slice(0,e),...n.slice(e+1)])},[]),insertAt:i((e,n)=>{r(t=>[...t.slice(0,e),n,...t.slice(e)])},[]),updateAt:i((e,n)=>{r(t=>t.map((t,r)=>r===e?n:t))},[]),clear:i(()=>r([]),[])}]}const q=n=>{const[t,r]=e(()=>u.get(n)||null);return[t,i((e,t)=>{u.set(n,e,t),r(e)},[n]),i(()=>{u.remove(n),r(null)},[n])]},K=e=>{const n=o(e);n.current=e,k(()=>()=>n.current())},U=(t,r=200)=>{const[i,c]=e(t),u=o(),s=o(null),d=o(0);return n(()=>{if(u.current)s.current=t,d.current=!0;else{c(t);const e=()=>{d.current?(d.current=!1,c(s.current),u.current=setTimeout(e,r)):u.current=void 0};u.current=setTimeout(e,r)}},[t]),K(()=>{u.current&&clearTimeout(u.current)}),i};function _(e,t){const r=o(null),i=o(e);return n(()=>{i.current=e},[e]),(...e)=>{r.current&&clearTimeout(r.current),r.current=setTimeout(()=>{i.current(...e)},t)}}function G({lazy:r=!1,debounce:c=500,box:u="border-box",callback:s=(()=>{})}={}){const d=o(null),[a,l]=e(null),[m,w]=e(null),v=o(!1),f=t(()=>function(e,n,t){let r=null,o=null;const i=()=>{r&&(clearTimeout(r),o=null,r=null)},c=function(...t){if(!n)return e.apply(this,t);const c=this;return i(),o=function(){e.apply(c,t)},void(r=setTimeout(()=>{r=null;{const e=o;return o=null,e&&e()}},n))};return c.cancel=i,c.flush=()=>{const e=o;i(),e&&e()},c}(l,c),[c]),h=i(([e])=>{d.current=e,s(e),r||(v.current?l(e):f(e)),v.current=!1},[r,f,s]);n(()=>{if(!m)return;v.current=!0;const e=new ResizeObserver(h);return e.observe(m,{box:u}),()=>{e.disconnect(),f.cancel()}},[m,c,u,h,f]);const g=i(()=>d.current,[]);return[w,r?g:a]}function Y(){const e=i(()=>{document.documentElement.style.setProperty("--vw",.01*document.documentElement.clientWidth+"px"),document.documentElement.style.setProperty("--dvh",.01*window.innerHeight+"px"),document.documentElement.style.setProperty("--svh",.01*document.documentElement.clientHeight+"px"),document.documentElement.style.setProperty("--lvh","1vh")},[]);return r(()=>(window.addEventListener("resize",e,!1),e(),()=>{window.removeEventListener("resize",e,!1)}),[e]),null}function Q(e,t){const r=o(e);return n(()=>{t(e,e)},[e,t]),[i(()=>r.current,[]),e=>{if("function"==typeof e){const n=e(r.current);return t(n,r.current),void(r.current=n)}e!==r.current&&(t(e,r.current),r.current=e)}]}function X(e,t,r=[]){const i=o(e);n(()=>{i.current=e},[e]),n(()=>{const e=setTimeout(()=>i.current(),t);return()=>{clearTimeout(e)}},[t,...r])}function Z(e=1,n=1,r=1,o=1,i="cover"){const[c,u]=t(()=>{if(!(e&&n&&r&&o))return[1,1];const t=e/n,c=r/o;let u;if("contain"===i)u=t>c?n*c:e;else{if("cover"!==i)return[1,1];u=t>c?e:n*c}return[e/u,n/(u/c)]},[e,n,o,r,i]);return[1/c,1/u]}export{q as useCookie,S as useCopyToClipboard,x as useDebounce,_ as useDebounceFn,a as useDebug,l as useDocumentReadyState,W as useDocumentTitle,k as useEffectOnce,b as useEventListener,H as useFavicon,N as useFirstMountState,P as useFoucFix,m as useFrame,j as useHover,C as useIOSToolbarState,R as useIdle,T as useIntersectionObserver,v as useInterval,d as useIsClient,A as useIsMounted,f as useIsTouchDevice,h as useIsVisible,w as useIsomorphicLayoutEffect,D as useKeySequence,Q as useLazyState,V as useList,z as useLocalStorage,g as useMediaQuery,Z as useObjectFit,s as useOnClickOutside,J as useOrientation,B as usePageLeave,F as usePageVisibility,Y as useRealViewport,p as useRect,G as useResizeObserver,M as useScript,I as useSessionStorage,E as useSlots,U as useThrottle,X as useTimeout,K as useUnmount,O as useUpdateEffect,L as useWindowSize}; //# sourceMappingURL=hooks.modern.mjs.map