Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@tjoskar/react-lazyload-img

Package Overview
Dependencies
0
Maintainers
1
Versions
10
Issues
File Explorer

Advanced tools

@tjoskar/react-lazyload-img

Lazy image loader for react

    1.2.3latest

Version published
Maintainers
1
Yearly downloads
9,549
increased by13.76%

Weekly downloads

Readme

Source

react-lazyload-img Build Status codecov

Lazy image loader for react

Install

$ npm install @tjoskar/react-lazyload-img

Usage

import React, { Component } from 'react' import { LazyLoadImage, LazyLoadBackgroundImage } from '@tjoskar/react-lazyload-img' const App = () => { const defaultImage = 'https://www.placecage.com/1000/1000' const image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg' return ( <> { /* To use an img-tag */ } <LazyLoadImage width={50} height="200px" defaultImage={this.defaultImage} image={this.image} /> { /* To use a div-tag with background image styling */ } <LazyLoadBackgroundImage width="100%" height="200px" defaultImage={this.defaultImage} image={this.image} /> </> ) }

You can also pass options (root, rootMargin, threshold) to the IntersectionObserver constructor. See the documentation for IntersectionObserver for more info. Eg.

<LazyLoadImage options={{ root: window }} height="200px" defaultImage={this.defaultImage} image={this.image} />

See: https://stackblitz.com/edit/react-lazy-load-image for examples

Props

Both LazyLoadImage and LazyLoadBackgroundImage have the same props:

defaultImage

Type: string

Path to the default image (placeholder) to show before the lazy loading

image

Type: string
Default: 60

Path to the image to be lazy loaded

errorImage?

Type: string

Path to an image to show if the loading of image fails, will use defaultImage if not set

onLoaded?

Type: () => void

Callback function after the image has been loaded

options?

Type: ObserverOptions

IntersectionObserver options. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options

style?

Type: React.CSSProperties

Will be passed to the underlying div/img tag

height

Type: () => void

The height of the image (can be set to auto)

width

Type: () => void

The width of the image (can be set to auto)

Requirement

The browser you are targeting needs to have support for IntersectionObserver and WeakMap or you need to import polyfill for them. You also need to use a bundler that understand es-modules (eg. webpack, rollup, parcel, fusebox, etc.)

License

MIT

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc