react-intersection-images
TypeScript icon, indicating that this package has built-in type declarations

0.4.0 • Public • Published

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;
 

Readme

Keywords

none

Package Sidebar

Install

npm i react-intersection-images

Weekly Downloads

194

Version

0.4.0

License

none

Unpacked Size

25.6 kB

Total Files

8

Last publish

Collaborators

  • trendyol-js