lazy-child

React component that renders its child when it enters the viewport.

Installation

npm install lazy-child

Usage

import Lazy from 'lazy-child';

function LazyLoadedImageExample() {
  return (
    <Lazy<HTMLImageElement>
      renderPlaceholder={(ref) => <img ref={ref} alt="Lazy loaded image" />}
    >
      <img src="example.jpg" alt="Lazy loaded image" />
    </Lazy>
  );
}

API

Lazy

Props

children: React.ReactNode

A React element to render when the placeholder enters the viewport.

offsetBottom?: number

Passed to the wrapped react-peekaboo instance.

Number of pixels to add to the bottom of the area checked against when computing in view elements.

Default: 0

offsetLeft?: number

Passed to the wrapped react-peekaboo instance.

Number of pixels to add to the left of the area checked against when computing in view elements.

Default: 0

offsetRight?: number

Passed to the wrapped react-peekaboo instance.

Number of pixels to add to the right of the area checked against when computing in view elements.

Default: 0

offsetTop?: number

Passed to the wrapped react-peekaboo instance.

Number of pixels to add to the top of the area checked against when computing in view elements.

Default: 0

renderPlaceholder<E extends HTMLElement>: (ref: React.Ref<E>) => React.ReactNode

Render prop that returns a React element to use as a placeholder. The function receives a ref as its first parameter that must be applied to a DOM element.

throttle?: number

Passed to the wrapped react-peekaboo instance.

Number of ms to throttle scroll events (only applies in environments that don't support IntersectionObserver).

Default: 100