@gentleduck/lazy

Render it when it scrolls into view

Lazy-load components and images in React with IntersectionObserver. SSR-safe, with zero dependencies.

IntersectionObserver
Nothing renders until the wrapper enters the viewport. Tune when with the native rootMargin and threshold options.
DuckLazyComponent
Wrap any subtree. Its children mount when the wrapper reaches the viewport, and a placeholder shows until then.
DuckLazyImage
A lazy <img> that replaces its placeholder on load, with a configurable fade and a preserved aspect ratio.
Works with next/image
Use DuckLazyImage in a Next.js app, or pass any image element as a child. Nothing ties it to a framework.
Zero dependencies
React and the browser’s IntersectionObserver API. No polyfills and no extra weight.
SSR-safe
The server renders the placeholder, and the client upgrades once the observer fires. No hydration mismatches.

Install

Wrap the parts of your page that sit below the fold.

import { DuckLazyComponent } from '@gentleduck/lazy/lazy-component'

gentleduck is MIT licensed and will always be free and open source. Every package ships with full source access — fork it, modify it, own it.