https://github.com/maciekgrzybek/react-laz-y
React lazy loading with Intersection Observer API
https://github.com/maciekgrzybek/react-laz-y
hacktoberfest intersection-observer lazy lazy-loading props react react-component react-components reactjs suspense
Last synced: 5 months ago
JSON representation
React lazy loading with Intersection Observer API
- Host: GitHub
- URL: https://github.com/maciekgrzybek/react-laz-y
- Owner: maciekgrzybek
- License: mit
- Created: 2020-01-29T16:27:18.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-11T23:52:22.000Z (over 4 years ago)
- Last Synced: 2025-04-23T23:41:59.376Z (6 months ago)
- Topics: hacktoberfest, intersection-observer, lazy, lazy-loading, props, react, react-component, react-components, reactjs, suspense
- Language: TypeScript
- Homepage:
- Size: 1.39 MB
- Stars: 19
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
Lazy load your components when they appear in the viewport.
Report Bug
·
Request Feature
## Table of Contents
- [About the Project](#about-the-project)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Usage](#usage)
- [License](#license)
- [Contact](#contact)
- [Notes](#notes)
## About The Project
By combining the power of browser [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) and [React Lazy API](https://reactjs.org/docs/code-splitting.html#reactlazy)
I've created a simple component that will allow you to lazy load your component when it appears in the browser's viewport.
Don't load components that user won't see on the first render, React Laz-y will detect the scroll position for you and inject the correct code when it's actually needed.
## Getting Started
To install, follow these few steps.
### Prerequisites
Before you start, make sure you use:
- React >= 16.6.0
- npm
```sh
npm install npm@latest -g
```
### Installation
* Install with npm
```sh
npm i react-laz-y-component-loader
```
or
* Install with yarn
```sh
yarn add react-laz-y-component-loader
```
## Usage
#### Basic example
Pass a component imported with `React.lazy` API as a children.
```js
import React from 'react';
import ReactLazy from 'react-laz-y-component-loader';
const MyComponent = React.lazy(() => import('./MyComponent'));
function App() {
return (
<>
My awesome title
>
);
};
export default App;
```
#### Usage with `rootMargin` property
Pass the `rootMargin` props to increase or decrease the area of the root bounding box.
```js
import React from 'react';
import ReactLazy from 'react-laz-y-component-loader';
const MyComponent = React.lazy(() => import('./MyComponent'));
function App() {
return (
<>
My awesome title
>
);
};
export default App;
```
#### Props
| Name | Type | Default | Required | Description |
|:------- |:-------------:| -----:|-----:| -----:|
| `children` | `ReactElement` | `undefined` | `true` | Child element loaded with `React.lazy` API. |
| `onLoad` | `function` | `() => {}` | `false` | Function that will be fired when child element is loaded. |
| `root` | `HTMLElement` | `viewport` | `false` | Parent of the element that will be loaded. |
| `rootMargin` | `string` | `"0px"` | `false` | Defines margin of root bounding box. See more [here](). |
| `threshold` | `number` || `number[]` | `0` | `false` | Determines how much of the elements wrapper needs to intersect with the bounding box. See more [here]().|
| `fallback` | `ReactElement` | `
Loading...` | false | Fallback element that will be rendered while target elements is being loaded. |
| `wrapperClass` | `string` | `""` | `false` | Custom class for element's wrapper. |
| `styles` | `object` | `{}` | `false` | Custom styles for element's wrapper. |
## License
Distributed under the MIT License. See `LICENSE` for more information.
## Contact
Maciek Grzybek - [@maciek_g88](https://twitter.com/maciek_g88) - maciekgrzybek1@gmail.com
## Notes
* Currently React Laz-y doesn't work with SSR due you React Lazy API limitations.
* React Lazy API only supports default exports. There's a simple workaround that you can find [here](https://reactjs.org/docs/code-splitting.html#named-exports).
* Intersection Observer API doesn't work with Internet Explorer. If you really need to support it, you can use [polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill). Simply import it in your project.