react-lazy-media

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

✔

✔

6+

✔

10+

✔

4.4+

$3

``
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 (
classes={['myLazyImage']}
src={'./hero.png'}
/>
);
}
}
`

You can import LazyImage LazyVideo LazyIframe LazyBackground LazyWebpPicture respectively.

$3

#### 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