Lazy load your components only when they're visible.
react-intersection-loader-demo
import { intersectionLoader } from 'react-intersection-loader'; // This will be imported (lazy loaded) only when the user is about to see it. const MyComponent = intersectionLoader(() => import('./MyComponent')); export default function App() { return ( <div> <div style={{ width: '100vw', height: '100vh', }} > <h1>I am a viewport size</h1> </div> <MyComponent /> </div> ); }
Since this uses react, support verity of use cases is a most.
Currently only supported with hooks, react >=16.8.0
Full support of SSR and hydration!
Testing is a top priority. Therefore I created fixtures with various use-cases of projects that use this library.
You can check it out here.
I build the fixtures using webpack, serve them and test them with playwright.
npm i react-intersection-loader
or
yarn add react-intersection-loader