react-lazy-media
Version:
Lazy load image, picture, video, and iframe media React components
143 lines (110 loc) • 7.39 kB
Markdown
## react-lazy-media
[](https://www.npmjs.com/package/react-lazy-media)
[](https://travis-ci.com/smrubin/react-lazy-media)
[](https://github.com/smrubin/react-lazy-media/blob/master/LICENSE)
Lazy load image, picture, video, and iframe media React components. react-lazy-media uses [yall-js](https://github.com/malchata/yall.js) under the hood to handle lazy loading.
Polyfilled with the [Intersection Observer Polyfill](https://www.npmjs.com/package/intersection-observer)
<table>
<tr>
<td align="center">
<img src="https://raw.github.com/alrra/browser-logos/39.2.2/src/chrome/chrome_48x48.png" alt="Chrome"><br>
✔
</td>
<td align="center">
<img src="https://raw.github.com/alrra/browser-logos/39.2.2/src/firefox/firefox_48x48.png" alt="Firefox"><br>
✔
</td>
<td align="center">
<img src="https://raw.github.com/alrra/browser-logos/39.2.2/src/safari/safari_48x48.png" alt="Safari"><br>
6+
</td>
<td align="center">
<img src="https://raw.github.com/alrra/browser-logos/39.2.2/src/edge/edge_48x48.png" alt="Edge"><br>
✔
</td>
<td align="center">
<img src="https://raw.github.com/alrra/browser-logos/39.2.2/src/archive/internet-explorer_7-8/internet-explorer_7-8_48x48.png" alt="Internet Explorer"><br>
10+
</td>
<td align="center">
<img src="https://raw.github.com/alrra/browser-logos/39.2.2/src/opera/opera_48x48.png" alt="Opera"><br>
✔
</td>
<td align="center">
<img src="https://raw.github.com/alrra/browser-logos/39.2.2/src/android/android_48x48.png" alt="Android"><br>
4.4+
</td>
</tr>
</table>
### Installation and Usage:
```
npm i -S react-lazy-media
```
#### Include the Component:
```
import React from 'react'
import { LazyImage } from 'react-lazy-media'
class Component extends React.Component {
render() {
return (
<LazyImage
classes={['myLazyImage']}
src={'./hero.png'}
/>
);
}
}
```
You can import `LazyImage` `LazyVideo` `LazyIframe` `LazyBackground` `LazyWebpPicture` respectively.
### Component Examples
#### Common
The following APIs are shared by every component.
| Name | Type | Default | Description |
| ------- | ------------- | ------- | ---------------------------------------------------------------------------------------- |
| classes | Array<string> | `[]` | Additional CSS classes (in addition to 'lazy' for the media element (img, video, iframe) |
| id | string | `''` | id for the media element (img, video, iframe) |
#### LazyImage
Lazy loads an image element. Supports loading a low-quality image placeholder.
| Name | Type | Default | Description |
| ------ | ----------------- | ---------------- | ---------------------------------------------------------------------------------------------------- |
| alt | string | `[]` | Alt text for the img |
| src | string (Required) | `N/A - Required` | src for the img |
| width | string | `''` | width for the img |
| height | string | `''` | height for the img |
| lqip | string | `''` | src for a loq quality image placeholder. will always be loaded and then replaced with actual src img |
#### LazyBackground
Lazy loads a background image for a div.
| Name | Type | Default | Description |
| ---- | ----------------- | ---------------- | ---------------------------- |
| src | string (Required) | `N/A - Required` | src for the background image |
#### LazyVideo
Lazy loads an HTML5 video.
| Name | Type | Default | Description |
| -------- | ----------------- | ---------------- | -------------------------------------------------- |
| src | string (Required) | `N/A - Required` | src for the video |
| width | string | `''` | width for the video |
| height | string | `''` | height for the video |
| poster | string | `''` | poster image for the video (before it loads/plays) |
| controls | bool | `true` | whether or not the video should display controls |
| preload | bool | `false` | whether or not the video should be preloaded |
| autoplay | bool | `false` | whether or not the video should autoplay |
| loop | bool | `false` | whether or not the video should loop |
| muted | bool | `false` | whether or not the video should be muted |
#### LazyIframe
Lazy loads an iframe.
| Name | Type | Default | Description |
| ---- | ----------------- | ---------------- | ------------------ |
| src | string (Required) | `N/A - Required` | src for the iframe |
#### LazyWebpPicture
Lazy loads an HTML5 picture. Attempts to load a Webp version of the asset first, and falls back to original src. Most of the props are passed down to the `LazyImage` child of this component.
| Name | Type | Default | Description |
| ------ | ----------------- | ---------------- | ---------------------------------------------------------------------------------------------------- |
| alt | string | `[]` | Alt text for the img |
| src | string (Required) | `N/A - Required` | src for the img |
| width | string | `''` | width for the img |
| height | string | `''` | height for the img |
| lqip | string | `''` | src for a loq quality image placeholder. will always be loaded and then replaced with actual src img |
| webp | string | `''` | The webp src for the img. Will suffix the src prop of not provided (e.g. hero.png => hero.png.webp) |
#### Todo
[] Add more configurable component: LazyPicture
[] Add code example for each component in readme