React Lazy Load component compatible with http request
npm install real-react-lazyloadbash
NPM
$ npm install --save real-react-lazyload
Yarn
$ yarn add real-react-lazyload
`RealLazyLoad usage
It's simple just import it.
javascript
import React from 'react';
import {RealLazyLoad} from 'real-react-lazyload';
function App() {
return (
{
console.log("Now Component is visible!")
return true;// return true to render component when get into viewport
}}>
Lazy Loaded Post
);
}export default App;
`For images, it is better use ImageRealLazyLoad component:
javascript
import React from "react";
import {ImageRealLazyLoad} from 'real-react-lazyload';
const App = () => {
return (
);
}export default App;
`Pay Attention
if you use Functional/Class Component in | 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
`javascriptimport 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 (
Loading...
)
});
const App = () => {
return (
{/ it is better to use ImageRealLazyLoad for loading Image it dose not have children prop /}
} src="http://cdn64.akairan.com/files/images/20163/2016329202544730340a.jpg"/>
);
}`
Example for Class Component Function
you should wrap your component with
javascript
// Loading.js
import React from "react";
import {withLazyLoadRef} from 'real-react-lazyload'class Loading extends React.Component {
render() {
return (
Loading
);
}
}export default withLazyLoadRef(Loading);
// Post.js
import React from "react";
import {withLazyLoadRef} from 'real-react-lazyload'
class Post extends React.Component {
render() {
return (
Lazy Loaded Post
);
}
}
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 (
}>
);
}
`
Example for Dom Element
javascript
import React from "react";
import {RealLazyLoad} from 'real-react-lazyload';
import Loading from './Loading';
import Post from './Post';const App = () => {
return (
Placeholder }>
Lazy Loaded Post
Props
| Name | Type | Default | required | Description |
|:---|:---|:---|:---|:---|
| placeholder | | 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__ |