https://github.com/jadbox/react-lazy-load-component
A special component that'll lazy load your react components when they are in view
https://github.com/jadbox/react-lazy-load-component
Last synced: 10 months ago
JSON representation
A special component that'll lazy load your react components when they are in view
- Host: GitHub
- URL: https://github.com/jadbox/react-lazy-load-component
- Owner: jadbox
- License: mit
- Created: 2019-07-04T20:14:38.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2025-07-21T23:29:50.000Z (11 months ago)
- Last Synced: 2025-08-09T14:33:12.535Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 535 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# react-lazy-load-component
A react component that allows lazy components to load once they are in viewpoint. It uses the
[IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). Once a component is triggered to load, it will stay loaded (does not unload).
[](https://codesandbox.io/s/54r7k92m04?fontsize=14)
- [Motivation](#motivation)
- [Installation](#installation)
- [API docs](#api)
- [Return value](#wip)
- [Example usage](#example-usage)
## Motivation
Often for large pages it would be ideal to not load components below the fold to improve performance.
## Installation
`npm install react-lazy-load-component`
Please note that this hook declares `react` and as _peer dependency_. Therefore, you must have
`react` installed to use this package.
**Note**: This hook relies on
[Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
and hence if you want to use it in a browser that doesn't support it, the onus of shipping the
polyfill is on the developer.
## Example usage
A CRA based example app (which is also used in the test suite) can be found under
[examples/cra](examples/cra). Inline examples showcasing use-cases are below.
### Example 1: Element with its parent document as viewport
As soon as at least 1px of the child element is visible in the parent document viewport,
`isInViewport` evaluates to true.
```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import LazyLoadComp from 'react-lazy-load-component'
const MyBigComponent = React.lazy( () => import('./MyBigComponent')); // your component to load
export default function SimpleElement() {
return (
loading} width="300" height="300">
)
}
```
## API
### react-lazy-load-component props
```typescript
interface IProps {
width?: number; // optional: set the height of the placeholder space. Default: 400
height?: number; // optional: set the width of the placeholder space. Default: 300
fallback?: FallbackType; // optional: set a fallback component while loading. Default: null (nothing)
threshold?: number; // optional: the percentage of the component in-viewpoint to start loading process. Default: 0.1%
onVisibleChange?: (visible:boolean)=>void; // optional: callback on visibility change for custom logic
children?: React.ReactNode; // your React.lazy-ified component
}
```