lazy-react
v3.5.0
Published
components to lazy load iframes, images and images as backgrounds
Downloads
1,432
Readme
lazy-react
Utility components to lazy load images, images-as-background and iframes using only requestAnimationFrame to handle scroll (both vertical and orizzontal) and window resize.
Install
npm install --save lazy-react
Also available as umd on unpkg
<script src="https://unpkg.com/lazy-react"></script>
Demo
You can see a demo of those packages in my personal site, cloning the repo and open the index.html in the demo folder or in this codepen.
Usage
The package exports 4 components:
- LazyBackgroundImage
- LazyImage
- LazyFrame
- LazyComponent
Every component accepts offeset as a prop, with 100px as fallback.
LazyBackgroundImage
Props
Name | Type | Description | Required | Default ---|---| ---| ---| ---| link | String | the url of the resource | ✔️ className | String | html class attribute | | empty string style | Object | html style attribute | | {}
LazyComponent
Props
Name | Type | Description | Required | Default ---|---| ---| ---| ---| className | String | html class attribute | | empty string style | Object | html style attribute | | {} |
This component is used to have a div placeholder before loading the component.
Usage:
<LazyComponent>
<ComponentToLoadWhenInViewport>
</LazyComponent>
LazyImage
Props
Name | Type | Description | Required | Default ---|---| ---| ---| ---| link | String | the url of the resource | ✔️ alt | String | same as html image alt attribute | | empty string style | Object | html style attribute | | {} className | String | html class attribute | | empty string preserveAspect | Boolean | If false it try to calculate width and height, it can break the layout | | true
If no style.height has been provided, it will use 300px as fallback to calculate position. 'preserveAspect' was added in 2.0.1 to prevent the component to apply style to the elements that doesn't have a class but are styled with nested selectors.
LazyFrame
Props
Name | Type | Description | Required | Default ---|---| ---| ---| ---| link | String | the url of the resource | ✔️ height | String | same as html image alt attribute | | 500px scrolling | String | same as html | | 'no' frameBorder | String | same as html | | 'no' allowTransparency | String | same as html | | 'true' allowFullScreen | String | same as html | | 'true' style | Object | html style attribute | | {width:'100%'}
Example code
//with es6
import { LazyBackgroundImage, LazyImage, LazyFrame, LazyComponent } from 'lazy-react'
//with es5
var LazyBackgroundImage = require('lazy-react').LazyBackgroundImage
var LazyImage = require('lazy-react').LazyImage
var LazyFrame = require('lazy-react').LazyFrame
var LazyComponent = require('lazy-react').LazyComponent
class Example extends React.Component {
constructor(props) {
super(props)
}
render() {
return <div>
<LazyBackgroundImage
link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
className="fill"
/>
<LazyImage
link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
offset={100}
/>
<LazyFrame
link={'http://jonathanobino.xyz'}
scrolling={true}
/>
<LazyComponent>
<ComponentToLoadWhenInViewport>
</LazyComponent>
</div>
}
}
Hook
Since version 3.x there is an hook available named 'useIsInViewport' that exposes 3 elements:
- setRef: used to set the ref of the dom that has to be in the viewport
- link: the passed link. It's equal to an empty string until the element is in the specified viewport
- isVisible: it's false until the element is in the specified viewport
Usage
import useIsInViewport from 'lazy-react'
function Example({link, offset}) {
const [setRef, link, isVisible] = useIsInViewport({link, offset})
if(!isVisible){
return <Placeholder />
}
return <div ref={(node)=>{
setRef(node)
}}>
<Content/>
</div>
}
The required props that have to be passed to the hooks are:
- link: string
- offset: number
Contributing
Pull requests for bug fixes, new features, and improvements are welcomed.