useLazyLoad Hook
A minimal React hook for lazy loading content when it scrolls into view. Uses IntersectionObserver with sensible defaults for image and data preloading.
Installation
$ npx shadcn@latest add @orecus/use-lazy-loadA minimal React hook for lazy loading content when it scrolls into view. Uses IntersectionObserver with sensible defaults for image and data preloading.
$ npx shadcn@latest add @orecus/use-lazy-loadimport { useLazyLoad } from "@/components/ui/orecus.io/lib/use-lazy-load";// Basic usage for lazy loading imagesfunction LazyImage({ src, alt }: { src: string; alt: string }) { const { ref, hasLoaded } = useLazyLoad({ rootMargin: "100px" }); return ( <div ref={ref}> {hasLoaded ? <img src={src} alt={alt} /> : <Skeleton />} </div> );}// Works great with data fetchingconst { ref, hasLoaded } = useLazyLoad();const { data } = useSWR(hasLoaded ? '/api/data' : null, fetcher);