LazyLoadComponent

Render any content only when it comes near the viewport.

import { LazyLoadComponent } from "lazymage";

<LazyLoadComponent placeholder={<div className="skeleton" />}>
  <Chart data={data} />
</LazyLoadComponent>;

Until the content is near the viewport, LazyLoadComponent renders a placeholder. Then it renders children. It does not go back to the placeholder.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content to render when it is near the viewport.
`placeholder`	`ReactNode`	—	Content to show until `children` render.
`className`	`string`	—	Class name of the placeholder `<span>`.
`style`	`CSSProperties`	—	Style of the placeholder `<span>`.
`width`	`number \| string`	—	Width of the placeholder `<span>`.
`height`	`number \| string`	—	Height of the placeholder `<span>`.
`beforeLoad`	`() => void`	—	Called one time, right before `children` render.
`afterLoad`	`() => void`	—	Called one time, after `children` rendered.
`threshold`	`number`	`100`	Distance in px from the viewport at which `children` render.
`visibleByDefault`	`boolean`	`false`	Render `children` at once.
`useIntersectionObserver`	`boolean`	`true`	Use an `IntersectionObserver` when the browser supports it.
`root`	`Element \| Document \| null`	`null`	Scroll container for the `IntersectionObserver`. `null` is the viewport.
`scrollMargin`	`number \| string`	—	Margin for nested scroll containers, in px or as a CSS length.
`scrollPosition`	`ScrollPosition \| null`	—	Scroll position from `trackWindowScroll`.
`delayMethod`	`"throttle" \| "debounce"`	`"throttle"`	How to limit the scroll and resize checks without `IntersectionObserver`.
`delayTime`	`number`	`300`	Time in ms for `delayMethod`.

The placeholder

lazymage must observe a DOM element to know when the content is near the viewport.

If placeholder is an element like <div />, lazymage gives it a ref and observes it directly. A forwardRef or memo component must pass this ref to a DOM element.
Other content, like text or a function component, goes inside a placeholder <span>. lazymage observes the <span>.

The className, style, width, and height props apply only to the placeholder <span>.