@tjoskar/react-lazyload-img
Version:
Lazy image loader for react
102 lines (59 loc) • 2.73 kB
Markdown
# react-lazyload-img [](https://travis-ci.org/tjoskar/react-lazyload-img) [](https://codecov.io/gh/tjoskar/react-lazyload-img)
> Lazy image loader for react
## Install
```
$ npm install @tjoskar/react-lazyload-img
```
## Usage
```jsx
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](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver) for more info. Eg.
```tsx
<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`<br>
Path to the default image (placeholder) to show before the lazy loading
##### image
Type: `string`<br>
Default: `60`
Path to the image to be lazy loaded
##### errorImage?
Type: `string`<br>
Path to an image to show if the loading of `image` fails, will use `defaultImage` if not set
##### onLoaded?
Type: `() => void`<br>
Callback function after the image has been loaded
##### options?
Type: `ObserverOptions`<br>
IntersectionObserver options. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options
##### style?
Type: `React.CSSProperties`<br>
Will be passed to the underlying div/img tag
##### height
Type: `() => void`<br>
The height of the image (can be set to `auto`)
##### width
Type: `() => void`<br>
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