https://github.com/tzachbon/react-intersection-loader
Lazy load your components only when they're visible.
https://github.com/tzachbon/react-intersection-loader
intersection-observer javascript lazy-loading lazyload loadable-components loader nextjs react ssr typescript webpack
Last synced: about 1 month ago
JSON representation
Lazy load your components only when they're visible.
- Host: GitHub
- URL: https://github.com/tzachbon/react-intersection-loader
- Owner: tzachbon
- License: mit
- Created: 2022-04-28T22:36:08.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-23T17:43:40.000Z (over 1 year ago)
- Last Synced: 2024-08-10T11:57:22.971Z (over 1 year ago)
- Topics: intersection-observer, javascript, lazy-loading, lazyload, loadable-components, loader, nextjs, react, ssr, typescript, webpack
- Language: TypeScript
- Homepage:
- Size: 35.8 MB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# React Intersection Loader
Lazy load your components only when they're visible.
[](https://github.com/tzachbon/react-intersection-loader/releases)
[](https://github.com/tzachbon/react-intersection-loader/actions)
[](https://www.npmjs.com/package/react-intersection-loader)
```tsx
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 (
I am a viewport size
);
}
```
### 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](./packages/react-intersection-loader/test/fixtures/).\
\
I build the fixtures using [webpack](https://webpack.js.org/), serve them and test them with [playwright](https://playwright.dev/).
## Installation
```sh
npm i react-intersection-loader
```
or
```sh
yarn add react-intersection-loader
```