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 = ="200px" = = /> /* To use a div-tag with background image styling */ <LazyLoadBackgroundImage ="100%" ="200px" = = /> </>
You can also pass options (root
, rootMargin
, threshold
) to the IntersectionObserver constructor. See the documentation for IntersectionObserver for more info. Eg.
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