Lazysizes: Use in React

[dariusrosendahl]

Love lazysizes, we've been using it for a long time.

Now we're trying to integrate it in a React component. We're using it with a <picture> and an <img /> as fallback for when the real images are still loading.

Part of our code:

import React, { Component } from "react";
import lazySizes from 'lazysizes';

class CaseItemImage extends Component { 
  constructor(props) {
    super(props);
  }

  render() {

    let image = { };

    if (this.props.image === null) {
      image = {
        normal: 'placeholder.png',
        retina: 'placeholder.png',
      }
    } else {
      image = {
        normal: this.props.image.source_url,
        retina: this.props.image.source_url,
      }
    }

    let Img = () => (
      <lazySizes>
      <picture className="img">
        <source data-srcset={image.normal + " 1x, "+ image.retina + " 2x"}></source>
        <img
          src="/placeholder.png"
          className="lazyload"
          alt=""
        />
      </picture>
      </lazySizes>
    );

    return (
      <React.Fragment>
        {Img()}
      </React.Fragment>
    );
  }
}

export default CaseItemImage;

It all works fine untill we start filtering the items and they are re-rendered. The data-srcset is still correct but the srcset is not anymore because lazysizes needs to initialize them again.

How do we do this without triggering an infinite loop like removing and adding classes on the componentDidUpdate()

[aFarkas]

1. Lazyiszes is no react component. So you should simply import it but don't render it as a component.
2. To make this simple there is the attrchange plugin for that. Simply import it and you are fine:

import 'lazysizes';
import 'lazysizes/plugins/attrchange/ls.attrchange';

Please close if this helps.

[dariusrosendahl]

Perfect!

[joacim-boive]

import 'lazysizes/plugins/attrchange/ls.attrchange';

That should be in the documentation somewhere (maybe it already is?) when using lazysizes + React
I've spent days on this problem not understanding what the cause was - it's extremely hard to debug as it only happends intermittently - the widths weren't processed in my case so it left the stub.

[aFarkas]

@joacim-boive
The current documentation is already quite long and I often get tickets where questions are asked that are already documented quite good. In case of React it is only documented on the attrchange plugin page. On the main readme there is only a small hint:

It also works automatically in conjunction with any kind of JS-/CSS-/Frontend-Framework (jQuery mobile, Bootstrap, Backbone, Angular, React, Ember (see also the attrchange/re-initialization extension)).

So if you want to improve it I'm open to get a PR but keep in mind that it should be short and is a special use case. Maybe rephrase the text above. And add a section like Usage with modern View libraries like React below either the JS API section or even below the Available Plugins section?

Maybe also a TOC for the readme would be good? So people can scan the content of the main readme faster???