{"library":"react-lazy-load","title":"React Lazy Load Component","description":"react-lazy-load is a React component designed to defer the loading of content, making web applications more performant by only rendering elements when they become visible within the viewport. The current stable version is 4.0.1, which includes support for React 18 and TypeScript, and internally utilizes the browser's Intersection Observer API for efficient detection of visibility. This library has seen an active development cadence, with a significant v4 major release focused on modernizing its approach by removing external dependencies and leveraging native browser capabilities. Its key differentiators include simplicity, automatic detection of scrolling containers, and a focus on performance by avoiding manual scroll watching in favor of Intersection Observer.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-lazy-load"],"cli":null},"imports":["import LazyLoad from 'react-lazy-load';","import type { LazyLoadProps } from 'react-lazy-load';","const LazyLoad = require('react-lazy-load');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport LazyLoad from 'react-lazy-load';\n\nconst MyImageGallery = () => (\n  <div>\n    <h1>My Lazy Loaded Gallery</h1>\n    <p>Scroll down to see images load as they enter the viewport.</p>\n    <div style={{ height: '800px', background: '#eee' }}>\n      {/* Placeholder to create scroll space */}\n      Content above the fold.\n    </div>\n    <LazyLoad height={300} offset={200} onContentVisible={() => console.log('Image 1 loaded!')}>\n      <img \n        src='https://via.placeholder.com/600x300/FF5733/FFFFFF?text=Lazy+Image+1'\n        alt='Placeholder Image 1'\n        style={{ display: 'block', maxWidth: '100%' }}\n      />\n    </LazyLoad>\n    <div style={{ height: '500px', background: '#ddd' }}>\n      {/* More placeholder content */}\n      More content to scroll past.\n    </div>\n    <LazyLoad height={400} threshold={0.75} onContentVisible={() => console.log('Image 2 loaded!')}>\n      <img \n        src='https://via.placeholder.com/800x400/33FF57/000000?text=Lazy+Image+2'\n        alt='Placeholder Image 2'\n        style={{ display: 'block', maxWidth: '100%' }}\n      />\n    </LazyLoad>\n    <div style={{ height: '1000px', background: '#ccc' }}>\n      {/* Final placeholder content */}\n      Even more content at the bottom.\n    </div>\n  </div>\n);\n\nexport default MyImageGallery;","lang":"typescript","description":"This quickstart demonstrates basic usage of the LazyLoad component, showing how to wrap an image, specify height, use `offset` to load content before it's fully visible, and `threshold` for a specific visibility percentage (v4+), including a callback for content visibility.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}