react-intersection-images

React Lazy Images

React lazy load images with IntersectionObserver.

Usage

import React from 'react';
import Lazy from "react-lazy-images"

const App = () => {
  const placeholder = "https://picsum.photos/id/237/500/300"

  const generateImg = () => `https://picsum.photos/id/${Math.floor(Math.random() * 999)}/500/300`

  return (
    <div>
      <Lazy placeholder={placeholder} force={true} src={generateImg()} ratio={0.1} />
      <Lazy placeholder={placeholder} src={generateImg()} ratio={0.1} />
      <Lazy placeholder={placeholder} src={generateImg()} ratio={0.1} />
      <Lazy placeholder={placeholder} src={generateImg()} ratio={0.1} />
      <Lazy placeholder={placeholder} src={generateImg()} ratio={0.1} />
      <Lazy placeholder={placeholder} src={generateImg()} ratio={0.1} />
    </div>
  );
}

export default App;