https://github.com/adibfirman/react-lazy-viewport

⚛️ Load your react component based on viewport browser
https://github.com/adibfirman/react-lazy-viewport

lazy-loading react reactjs

Last synced: 29 days ago
JSON representation

⚛️ Load your react component based on viewport browser

• Host: GitHub
• URL: https://github.com/adibfirman/react-lazy-viewport
• Owner: adibfirman
• License: mit
• Created: 2019-10-31T02:13:44.000Z (about 5 years ago)
• Default Branch: development
• Last Pushed: 2020-12-30T05:21:14.000Z (almost 4 years ago)
• Last Synced: 2024-11-13T09:49:39.689Z (about 1 month ago)
• Topics: lazy-loading, react, reactjs
• Language: TypeScript
• Homepage: https://codesandbox.io/s/react-lazy-viewport-example-g44en
• Size: 1.03 MB
• Stars: 26
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• oss - React Lazy Viewport - Load your react component based on viewport browser - React, Intersection Observer, Viewport (Open Source Project / Utility)

README

        
# React Lazy Viewport

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](https://github.com/adibfirman/react-lazy-viewport/pulls)

[![npm version](https://badge.fury.io/js/react-lazy-viewport.svg)](https://badge.fury.io/js/react-lazy-viewport)

[![Bundlephobia](https://badgen.net/bundlephobia/min/react-lazy-viewport)](https://bundlephobia.com/result?p=react-lazy-viewport@latest)

[![Bundlephobia](https://badgen.net/bundlephobia/minzip/react-lazy-viewport)](https://bundlephobia.com/result?p=react-lazy-viewport@latest)

Load your React Component based on viewport, this library using [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) if your app targeting to not modern browser please adding this [Polyfill](https://www.npmjs.com/package/intersection-observer).

## Features

- [x] Type safe

- [ ] Preload component

- [x] SSR Support

## Instalation

```

$ yarn add react-lazy-viewport

$ npm i react-lazy-viewport

```

## Demo

We assume we have some code like this.


![example code](./docs/example-code.png)


and then if you open the dev tools, the file will be loaded based on viewport

![example code](./docs/example-result.gif)

## Contribute & Help

- Fork and send Pull Requests are welcome

- Submit an issues

- A new feature requests

## License

This library is [MIT licensed](https://github.com/adibfirman/react-lazy-viewport/blob/master/LICENSE)