Welcome to the React Vanilla Lazyload repo! Yes, the name is a bit of a head-scratcher ๐ . But fear not, despite the contradiction, the story behind this oddly fitting name: we're using a fantastic script called Vanilla LazyLoad to lazily load our images in React.
So, even though React isn't exactly vanilla, this little module does its job beautifully... Get ready to turbocharge your React apps!... with React "Vanilla" LazyLoading.
npm install react-vanilla-lazyload
To enable the lazy loading in your app import the VanillaLazyLoad
component or use LazyWrapper
to wrap your lazy components.
The difference between VanillaLazyLoad
and LazyWrapper
is that LazyWrapper
is a wrapper component that wraps all lazy components in your app, use it in case you want to limit the scope of your lazy components.
Note that the lazy-loaded elements should not be in the initial viewport to avoid LCP or FID issues.
So in short, you can do the following:
<>
{/* The rest of the app */}
<VanillaLazyLoad/>
</>
OR if you want to limit the scope of your lazy components:
<LazyWrapper>
{/* The components that contains the lazy components */}
</LazyWrapper>
VanillaLazyLoad
- This is the main script that you need to import and add to your app footer to use it.LazyWrapper
- This is a wrapper component that wraps all lazy components. this replaces the VanillaLazyLoad component. This is useful in case you want to use it inside a wrapper
LazyEl
- This component is used to lazy load any element, has a set of props that can be used to customize the lazy load (i.e. srcBg srcBgHDPI, dataBgMulti, dataBgMultiHidpi) used for backgrounds. typed as html elementLazyImg
- This component is used to lazy load images. typed as imageLazyVideo
- This component is used to lazy load videos. typed as videoLazyIframe
- This component is used to lazy load iframes. typed as iframeLazyModule
- This component is used to lazy load React Components. typed as React Component
Check out the Examples to get started.
If you want to use the VanillaLazyLoad
component, you can use it in your app footer and after all the lazy components.
import React from "react";
import {VanillaLazyLoad, LazyEl} from "react-vanilla-lazyload";
const App = () => {
return (
<>
{/* The rest of the app */}
<LazyImg src={"https://github.com/erikyo/react-vanilla-lazyload/demos/images/440x560-01.webp"} width={440} height={560}/>
<VanillaLazyLoad/>
</>
);
};
export default App;
If you want to use the LazyWrapper
component, you can use it in your app footer.
import React from 'react';
import {
LazyWrapper,
LazyImg,
LazyVideo,
LazyIframe,
LazyEl,
LazyModule
} from "react-vanilla-lazyload";
const MyComponent = () => {
return (
<LazyWrapper>
{/* The Lazy components are here */}
<LazyImg src={"https://github.com/erikyo/react-vanilla-lazyload/demos/images/440x560-01.webp"} width={440} height={560}/>
</LazyWrapper>
);
};
export default MyComponent;
import React from 'react';
import {
LazyWrapper,
LazyImg,
LazyVideo,
LazyIframe,
LazyEl,
LazyModule
} from "react-vanilla-lazyload";
const MyComponent = () => {
return (
<LazyWrapper>
{/** Image */}
<LazyImg src={"https://github.com/erikyo/react-vanilla-lazyload/demos/images/440x560-01.webp"} width={440} height={560}/>
{/** Iframe */}
<LazyIframe src={"https://github.com/erikyo/react-vanilla-lazyload/demos/iframes/i01.html"} title={"iframe"} />
{/** Video */}
<LazyVideo src={"https://github.com/erikyo/react-vanilla-lazyload/demos/videos/1920x1080-01.mp4"} poster={"https://github.com/erikyo/react-vanilla-lazyload/demos/images/440x560-01.webp"}/>
{/** HTML Element */}
<LazyEl bg={"https://github.com/erikyo/react-vanilla-lazyload/demos/images/440x560-01.webp"}/>
{/** React Component */}
<LazyModule component={import('src/components/MyComponent.tsx')} loader={<Loading/>}/>
</LazyWrapper>
);
};
export default MyComponent;
LazyImg, LazyVideo, LazyIframe are used to lazy load images, videos and iframes. They are typed as html element, image, video and iframe respectively.
Those components are designed as a drop-in replacement for the vanilla img
, video
, iframe
elements you can use in your app simply replacing the tag img
, video
, iframe
with LazyImg
, LazyVideo
, LazyIframe
.
LazyEl is used to lazy load any element, has a set of props that can be used to customize the lazy load (i.e. srcBg srcBgHDPI, dataBgMulti, dataBgMultiHidpi) used for backgrounds. It is typed as html element.
bg
- The source of the backgroundbgHidpi
- The source of the hidpi backgroundbgMulti
- The source of the background for multi resolutionbgMultiHidpi
- The source of the background for multi resolution and hidpi
<LazyEl srcBg={"https://github.com/erikyo/react-vanilla-lazyload/demos/images/440x560-01.webp"}/>
LazyModule is used to lazy load React Components.
component
- A function that returns a React Componentloader
- A React Component that will be rendered while the component is loading
<LazyModule component={import('src/components/MyComponent.tsx')} loader={<Loading/>}/>
Example | Code | Demo |
---|---|---|
demo | demo.tsx | demo |
animated | animated.tsx | demo |
images | images.tsx | demo |
infinite scroll | no-lazyload.tsx | demo |
no-lazyload | no-lazyload.tsx | demo |
native | native.tsx | demo |