react-lazy-media

react-lazy-media

Lazy load image, picture, video, and iframe media React components. react-lazy-media uses vanilla-lazyload under the hood to handle lazy loading.

Polyfilled with the Intersection Observer Polyfill

✔

✔

6+

✔

10+

✔

4.4+

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	[]	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 code example for each component in readme