React Intersection Loader

Lazy load your components only when they're visible.

1import { intersectionLoader } from 'react-intersection-loader';
2
3// This will be imported (lazy loaded) only when the user is about to see it.
4const MyComponent = intersectionLoader(() => import('./MyComponent'));
5
6export default function App() {
7  return (
8    <div>
9      <div
10        style={{
11          width: '100vw',
12          height: '100vh',
13        }}
14      >
15        <h1>I am a viewport size</h1>
16      </div>
17      <MyComponent />
18    </div>
19  );
20}
21

Support

Since this uses react, support verity of use cases is a most.

React

Currently only supported with hooks, react >=16.8.0

SSR (Server-side rendering)

Full support of SSR and hydration!

Examples

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.

Installation

1npm i react-intersection-loader

or

1yarn add react-intersection-loader