Real React Lazy Load

React Component to lazy load all component you want and better features to support for http request

یک کتابخانه React برای Lazy Loading کامپوننت هایتان استفاده کنید

see examlpes on code sandbox

Feature

😀 easy to use
⚡️ optimization performance
💥 tiny bundle(~6kb)
🌐 componentEntryCallback it is very useful for prevent loading until finish a task like http request
🅿️ support placeholder
🖼️ Special Componnet for image lazy loading

Installation

# NPM
$ npm install --save real-react-lazyload
# Yarn
$ yarn add real-react-lazyload

RealLazyLoad usage

It's simple just import it.

import React from 'react';
import {RealLazyLoad} from 'real-react-lazyload';
function App() {
    return (
        <div className="App">
                <RealLazyLoad componentEntryCallback={() => {
                    console.log("Now Component is visible!")
                    return true;// return true to render component when get into viewport
                }}>
                    <div className="post">
                        Lazy Loaded Post
                    </div>
                </RealLazyLoad>
        </div>
    );
}

export default App;

For images, it is better use ImageRealLazyLoad component:

import React from "react";
import {ImageRealLazyLoad} from 'real-react-lazyload';
const App = () => {
    return (
        <div className="container">
            <ImageRealLazyLoad src="image src" alt="image alt" className="image class"/>
        </div>           
    );
}

export default App;

Pay Attention

if you use Functional/Class Component in placeholder | children you should use forwardRef.
because React discourage to use findDOMNode we use Ref instead of it. so you should use DOM in children | placeholder props or use Functional/Class Component with forwardRef see examples.
use ref from forwardRef in DOM Element.

Example for Functional Component

import React from "react";
import {ImageRealLazyLoad, RealLazyLoad} from 'real-react-lazyload';
import Loading from "./Loading";

// Functional Component with Forwarded Ref
const Loading = forwardRef((props, ref) => {
            // you should use ref in dom element RealLazyLoad can access it for lazyloading
    return  (<div ref={ref} className="loading">
                Loading...
            </div>)
    
});


const App = () => {
    return (
        <div className="container">
            {/* it is better to use ImageRealLazyLoad for loading Image it dose not have children prop */}
            <ImageRealLazyLoad placeholder={<Loading/>} src="http://cdn64.akairan.com/files/images/20163/2016329202544730340a.jpg"/>
        </div>
    );
}

Example for Class Component Function

you should wrap your component with withLazyLoadRef

// Loading.js
import React from "react";
import {withLazyLoadRef} from 'real-react-lazyload'

class Loading extends React.Component {
    render() {
        return (
            <div ref={this.props.lazyLoadRef} className="loading">
                Loading
            </div>
        );
    }
}

export default withLazyLoadRef(Loading);

// Post.js
import React from "react";
import {withLazyLoadRef} from 'real-react-lazyload'

class Post extends React.Component {
    render() {
        return (
            <div ref={this.props.lazyLoadRef} className="post">
                Lazy Loaded Post
            </div>
        );
    }
}
export default withLazyLoadRef(Post);

// App.js
import React from "react";
import {RealLazyLoad} from 'real-react-lazyload';
import Loading from './Loading';
import Post from './Post';

const App = () => {
    return (
        <div className="App">
                <RealLazyLoad placeholder={<Loading/>}>
                    <Post/>
                </RealLazyLoad>
        </div>
    );
}

Example for Dom Element

import React from "react";
import {RealLazyLoad} from 'real-react-lazyload';
import Loading from './Loading';
import Post from './Post';

const App = () => {
    return (
        <div className="App">
            <RealLazyLoad placeholder={<div> Placeholder </div>}>
                <div className="post">
                    Lazy Loaded Post
                </div>
            </RealLazyLoad>
        </div>
    );
}

Props

Name	Type	Default	required	Description
placeholder	ReactComponent	div.RealLazyLoad-placeholder	false	React Elements to use as placeholder
visibleByDefault	boolean	false	false	whether component must be visible by default
root	Element	window	false	The element that is used as the viewport for lazyloading visibility
rootMargin	string	'0px'	false	Margin around RealLazyLoad component for lazyloading
forceVisible	boolean	false	false	it force RealLazyLoad render the component in any state it is
componentEntryCallback	function	undefined	false	it will call when component get enter to viewport it will render component if it return true and dose not render component if it return false. this callback won't work if forceVisible is set

چرا

در حال توسعه پروژه ای برای React نیاز بود کامپوننت من به محض پدیدار شدن در Viewport ریکوئستی به سمت API بدهد و نتیجه را رندر کند ولی کتابخانه های فعلی از چنین امکانی پشتیبانی نمی کردند و به محض ورود به Viewport کامپوننت را رند میکردند به همین دلیل مجبور بودم یا از استقلال کامپوننت جلوگیری کنم و مدیریت بخش ها را به کاپوننت بالاتر بدهم که باعث تکرار بیهوده کد در چندین قسمت می شد و راه حل دیگه استفاده از کتابخانه ای که قبل از رندر شدن از من درخواست کند و درصورت اجازه من رندر رو انجام دهد

LICENCE

MIT

Developer

@shirejoni