Skip to content

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

License

Notifications You must be signed in to change notification settings

shirejoni/real-react-lazyload

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published