New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

react-lazy-load-image-component

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-lazy-load-image-component

React Component to lazy load images using a HOC to track window scroll position.


Version published
Weekly downloads
208K
decreased by-2.01%
Maintainers
1
Weekly downloads
 
Created

What is react-lazy-load-image-component?

The react-lazy-load-image-component package is a React component that provides lazy loading functionality for images. It helps improve performance by loading images only when they are in the viewport, reducing the initial load time and bandwidth usage.

What are react-lazy-load-image-component's main functionalities?

Basic Lazy Loading

This feature allows you to lazy load an image with a blur effect. The image will only load when it comes into the viewport, improving performance.

import { LazyLoadImage } from 'react-lazy-load-image-component';
import 'react-lazy-load-image-component/src/effects/blur.css';

const App = () => (
  <LazyLoadImage
    alt={'Image Alt Text'}
    height={200}
    src={'https://example.com/image.jpg'} // use normal <img> attributes as props
    width={200}
    effect='blur'
  />
);

Placeholder Image

This feature allows you to specify a placeholder image that will be displayed while the main image is loading. This can enhance the user experience by providing a visual cue that an image is being loaded.

import { LazyLoadImage } from 'react-lazy-load-image-component';
import 'react-lazy-load-image-component/src/effects/blur.css';

const App = () => (
  <LazyLoadImage
    alt={'Image Alt Text'}
    height={200}
    src={'https://example.com/image.jpg'}
    width={200}
    placeholderSrc={'https://example.com/placeholder.jpg'}
    effect='blur'
  />
);

Custom Placeholder

This feature allows you to use a custom React component as a placeholder while the main image is loading. This provides more flexibility in designing the loading state.

import { LazyLoadImage } from 'react-lazy-load-image-component';
import 'react-lazy-load-image-component/src/effects/blur.css';

const App = () => (
  <LazyLoadImage
    alt={'Image Alt Text'}
    height={200}
    src={'https://example.com/image.jpg'}
    width={200}
    placeholder={<div style={{ height: 200, width: 200, backgroundColor: '#ccc' }}>Loading...</div>}
    effect='blur'
  />
);

Other packages similar to react-lazy-load-image-component

FAQs

Package last updated on 06 Apr 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts