Documentation how to use this libary with React & co.

[sapkra]

In the readme file you tell me that I can use this library with React and other javascript frameworks but there is no documentation for it.

Would be nice if you can add example code. ;)

[verlok]

You’re right, but I never tried it with any library yet.

Did anyone try it already?

[sapkra]

I'm trying it at the moment with React. I will finish my implementation next week. If I still have time I can report how I implemented it.

[verlok]

Please do. I would report the documentation in the main Readme file. It would be really useful to all the React community.

[MicroBenz]

Any updates?

[verlok]

@sapkra did you make it?

[sapkra]

Sorry for my late answer but I had to pause my work because of priority reasons. We continued to work on it this week.

I did it but I didn't had the time to post my results. I will set it on my todo list.

[verlok]

Thank you very much.
Me and all the react community are looking forward to reading your feedback.

[xuya227939]

Do you have a document on the use of React?

[verlok]

I'm asking for the support of the community here. I've never tried this on React.
@sapkra any news on your side?

[sapkra]

I wrote it some time ago. Maybe there is potential for improvements. Please feel free to comment.

import PropTypes from 'prop-types';
import React from 'react';
import LazyLoad from 'vanilla-lazyload';
import lazyloadConfig from 'config/lazyload';

// Only initialize it one time for the entire application
if (!document.lazyLoadInstance) {
    document.lazyLoadInstance = new LazyLoad(lazyloadConfig);
}

export class Image extends React.Component {
// Update lazyLoad after first rendering of every image
    componentDidMount () {
        document.lazyLoadInstance.update();
    }

// Update lazyLoad after rerendering of every image
    componentDidUpdate () {
        document.lazyLoadInstance.update();
    }

// Just render the image with data-src
    render () {
        const {
            altText,
            source,
        } = this.props;

        return (
            <img
                alt={altText}
                className="rd__img"
                data-src={source}
            />
        );
    }
}

export default Image;

[verlok]

Very good job @sapkra!
And thank you very much for helping out!

[xuya227939]

Thank you very much

[xuya227939]

When I tried to run the code, I returned an empty object.

[verlok]

@xuya227939 I'm investingating on this on issue #230.
Versions 10.12.0 and 8.12.0 should work correctly. Please use those until I fix that.

[verlok]

Hey there, I'm reopening this because I need more information. How are you building your resources? It seems @xuya227939 you're using WebPack and UglifyJS. Is there any project / scaffolding from where I can copy your infrastructure to rapidly test LazyLoad in it?

[xuya227939]

Hey，The 8.12.0 version is good，I'm using the local database, so I'm sorry I can't provide the project.

[verlok]

You're right.
Since 8.13.0 and 10.13.0 I changed the module formats (AMD, UMD, ES2015 and IIFE) in the dist folder.
This thread is now not anymore related to React usage, but to WebPack bundling.
I'm investigating this in #230 see details there.

[verlok]

Duplicate of #230

[verlok]

Hi everyone,

@sapkra, @luisherranz, I created a new example of usage here on Sandbox.

This implementation takes the same props that you would normally pass to the img tag.
Feel free to fork and improve!

Have a nice week-end,
Andrea

[luisherranz]

Thanks @verlok!

[verlok]

You’re welcome guys! :)