react-lazy-media

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

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