Lazy load image, picture, video, and iframe media React components. react-lazy-media uses yall-js under the hood to handle lazy loading.
Polyfilled with the Intersection Observer Polyfill
✔ |
✔ |
6+ |
✔ |
10+ |
✔ |
4.4+ |
npm i -S react-lazy-media
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.
The following APIs are shared by every component.
Name | Type | Default | Description |
---|---|---|---|
classes | Array | [] |
Additional CSS classes (in addition to 'lazy' for the media element (img, video, iframe) |
id | string | '' |
id for the media element (img, video, iframe) |
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 |
Lazy loads a background image for a div.
Name | Type | Default | Description |
---|---|---|---|
src | string (Required) | N/A - Required |
src for the background image |
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 |
Lazy loads an iframe.
Name | Type | Default | Description |
---|---|---|---|
src | string (Required) | N/A - Required |
src for the iframe |
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) |
[] Add more configurable component: LazyPicture [] Add code example for each component in readme