relazsizes

React wrapper component for lazysizes. Inspired by react-lazysizes 💤🚀

Relazsizes is a component for using lazysizes library in your react application. You can use relazsizes for lazyload image assets in your web application with various strategies and also lazyload iframe to boost your React web app performance.

Table of Contents

• Demo
• Instalation
• Usage
• Props List & Types
• Contribution

Demo

If you're looking for a working demo, you can click this link.

Instalation

npm install relazsizes

# or

yarn add relazsizes

Usage

import Relazsizes from 'relazsizes'

// simple image lazyload with lowres image as a placeholder
<Relazsizes
  src="/img/black-and-white-sm.jpg"
  dataSrc="/img/black-and-white.jpg"
  className="DemoContent-media"
  alt="Simple lazy load images"
/>

// simple image lazyload without placeholder
<Relazsizes
  src="/img/black-and-white-sm.jpg"
  dataSrc="/img/black-and-white.jpg"
  className="DemoContent-media"
  alt="Simple lazy load images"
/>

// lazyload images with picture element
const srcSet1 = [
  {
    media: '(min-width: 1600px)',
    srcset: '/img/light/light-lg.jpg'
  },
  {
    media: '(min-width: 800px)',
    srcset: '/img/light/light-md.jpg'
  }
]

<Relazsizes
  el="picture"
  dataSrcset={srcSet1}
  dataSrc="/img/light/light-sm.jpg"
  className="DemoContent-media"
  alt="lazy load images with picture tag"
/>

// lazyload with images and srcset attribute
const srcSet2 = `
  /img/cloud/cloud-hd.jpg 2x
`

<Relazsizes
  dataSizes="auto"
  dataSrcset={srcSet2}
  dataSrc="/img/cloud/cloud-lg.jpg"
  className="DemoContent-media"
  alt="Lazy load images with img srcset"
/>

// lazyload youtube embeded video with iframe
<Relazsizes
  el="iframe"
  height="700px"
  dataSrc="https://www.youtube.com/embed/LXb3EKWsInQ"
  className="DemoContent-media"
  frameborder="0"
  title="Costa Rica!"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
/>

Props List & Types

| props | types | description | example | default | |-------|-------|-------------|---------|---------| | alt | string | Img Alternate text | 'Image Alt Text' | | | className | string | CSS class names | 'img img-responsive' | | | dataSrcset | array of srcSetItem or string | srcset attribute value if using img, and will be generated as source element if using picture. Reference if using img Reference if using picture | see here | | | dataSizes | string | img sizes attribute, reference | '(max-width: 600px) 200px, 50vw' or 'auto' | | | dataSrc | string | the main image source that will be lazyloaded | '/img/cloud-sd.jpg' | | | el | enum: 'img', 'picture', 'iframe' | type of html element to use | picture | 'img' | | src | string | '/img/filename-hd.jpg' | the image placeholder | 'data:image/gif;base64,R0lGODlhA. . .''|

Value of dataSrcset

You can use srcset attribute when using img or picture element via dataSrcset prop. The type of the prop can be in a string or in an array of object shape defined as srcSetItem. Passing dataSrcset as a string will work the best when you are using img el. While you are using picture element, it is strongly adviced to pass the value in array of srcSetItem instead.

Structure of srcSetItem:

| key | type | description | example | |-----|------|-------------|---------| | media | string | media attr value in source element inside of picture | '(min-width: 800px)' | | srcset | string | srcset attr value in source element inside of picture | '/img/filename-hd.jpg' | | type | string | type attr value in source element inside of picture, type of the file | 'image/svg+xml'| | variant | string | this value will be used if array ofsrcSetItemis passed todataSrcsetprop while usingimgelement. The value will be used as an descriptor |'2x', '600w'` |

Example given:

• In the script bellow we are passing value of srcSet2 variable (which type is string) into dataSrcset prop.

// lazyload with images and srcset attribute
const srcSet2 = `
  /img/cloud/cloud-hd.jpg 2x
`

<Relazsizes
  dataSizes="auto"
  dataSrcset={srcSet2}
  dataSrc="/img/cloud/cloud-lg.jpg"
  className="DemoContent-media"
  alt="Lazy load images with img srcset"
/>

The code above will be rendered in browser as:

<img src="/img/cloud/cloud-lg.jpg"
  data-src="/img/cloud/cloud-lg.jpg"
  data-srcset="/img/cloud/cloud-hd.jpg 2x" 
  data-sizes="auto"
  class="DemoContent-media lazyautosizes lazyloaded"
  alt="Lazy load images with img srcset" sizes="1344px"
  srcset="/img/cloud/cloud-hd.jpg 2x">

• While in the example below, when using picture element, we can pass array of srcSetItem into the dataSrcset prop. Each item in the array will be rendered as source element inside the picture.

// lazyload images with picture element
const srcSet1 = [
  {
    media: '(min-width: 1600px)',
    srcset: '/img/light/light-lg.jpg'
  },
  {
    media: '(min-width: 800px)',
    srcset: '/img/light/light-md.jpg'
  }
]

<Relazsizes
  el="picture"
  dataSrcset={srcSet1}
  dataSrc="/img/light/light-sm.jpg"
  className="DemoContent-media"
  alt="lazy load images with picture tag"
/>

The code above will be rendered in browser as:

<picture>
  <source data-srcset="/img/light/light-lg.jpg" media="(min-width: 1600px)" srcset="/img/light/light-lg.jpg">
  <source data-srcset="/img/light/light-md.jpg" media="(min-width: 800px)" srcset="/img/light/light-md.jpg">
  <img src="/img/light/light-sm.jpg"
    data-src="/img/light/light-sm.jpg"
    class="DemoContent-media lazyloaded" 
    alt="lazy load images with picture tag">
</picture>

Contribution

Feedbacks and contributions are really welcomed! Feel free to make issues or pull requests to this repository. :pray: