react-lazy-media

Lazy load image, picture, video, and iframe media React components

Usage no npm install needed!

<script type="module">
  import reactLazyMedia from 'https://cdn.skypack.dev/react-lazy-media';
</script>

README

react-lazy-media

npm Build Status GitHub license

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

Chrome
Firefox
Safari
6+
Edge
Internet Explorer
10+
Opera
Android
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 more configurable component: LazyPicture [] Add code example for each component in readme