rly

react-laz-y-component-loader

React lazy loading with Intersection Observer API

Showing:

Popularity

Downloads/wk

1

GitHub Stars

19

Maintenance

Last Commit

2yrs ago

Contributors

0

Package

Dependencies

0

Size (min+gzip)

0.8KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme


Logo

Lazy load your components when they appear in the viewport.

Report Bug · Request Feature

Table of Contents

About The Project

By combining the power of browser Intersection Observer API and React Lazy API 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
npm install npm@latest -g

Installation

  • Install with npm
npm i react-laz-y-component-loader

or

  • Install with yarn
yarn add react-laz-y-component-loader

Usage

Basic example

Pass a component imported with React.lazy API as a children.

import React from 'react';
import ReactLazy from 'react-laz-y-component-loader';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <>
      <header style={{ height: '300vh' }}>
        <h1>My awesome title</h1>
      </header>
      <main>
        <ReactLazy>
          <MyComponent />
        </ReactLazy>
      </main>
    </>
  );
};

export default App;

Usage with rootMargin property

Pass the rootMargin props to increase or decrease the area of the root bounding box.

rootMargin props

import React from 'react';
import ReactLazy from 'react-laz-y-component-loader';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <>
      <header style={{ height: '300vh' }}>
        <h1>My awesome title</h1>
      </header>
      <main>
        <ReactLazy rootMargin="100px 0px">
          <MyComponent />
        </ReactLazy>
      </main>
    </>
  );
};

export default App;

Props

NameTypeDefaultRequiredDescription
childrenReactElementundefinedtrueChild element loaded with React.lazy API.
onLoadfunction() => {}falseFunction that will be fired when child element is loaded.
rootHTMLElementviewportfalseParent of the element that will be loaded.
rootMarginstring"0px"falseDefines margin of root bounding box. See more here.
thresholdnumber || number[]0falseDetermines how much of the elements wrapper needs to intersect with the bounding box. See more here.
fallbackReactElement<div>Loading...</div>falseFallback element that will be rendered while target elements is being loaded.
wrapperClassstring""falseCustom class for element's wrapper.
stylesobject{}falseCustom styles for element's wrapper.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Maciek Grzybek - @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.
  • Intersection Observer API doesn't work with Internet Explorer. If you really need to support it, you can use polyfill. Simply import it in your project.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100