Security News
How Threat Actors are Abusing GitHub’s File Upload Feature to Host Malware
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
@tjoskar/react-lazyload-img
Advanced tools
Readme
Lazy image loader for react
$ npm install @tjoskar/react-lazyload-img
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
Both LazyLoadImage
and LazyLoadBackgroundImage
have the same props:
Type: string
Path to the default image (placeholder) to show before the lazy loading
Type: string
Default: 60
Path to the image to be lazy loaded
Type: string
Path to an image to show if the loading of image
fails, will use defaultImage
if not set
Type: () => void
Callback function after the image has been loaded
Type: ObserverOptions
IntersectionObserver options. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options
Type: React.CSSProperties
Will be passed to the underlying div/img tag
Type: () => void
The height of the image (can be set to auto
)
Type: () => void
The width of the image (can be set to auto
)
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.)
MIT
FAQs
Lazy image loader for react
The npm package @tjoskar/react-lazyload-img receives a total of 47 weekly downloads. As such, @tjoskar/react-lazyload-img popularity was classified as not popular.
We found that @tjoskar/react-lazyload-img demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.