Welcome to LazyBastard

LazyBastard is a React component that allows a child component to be dynamically loaded only when that component is in the user's field of view (e.g. by scrolling down the page). This library uses the browser's native Intersection Observer API. See the rest of this documentation for compatibility for different versions of the most popular browsers.

Browsers support

| IE / Edge | Firefox | Chrome | Safari | iOS Safari | Opera | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | IE11, Edge >= 80 | >= 55 | >= 55 | >= 12.1 | >= 12.1 | >= 40 |

Installation

YARN

yarn add @react-goodies/lazy-bastard

NPM

npm install @react-goodies/lazy-bastard --save

Basic implementation

import React from "react";
import { LazyBastard } from "@react-goodies/lazy-bastard";

// https://reactjs.org/docs/code-splitting.html#reactlazy
const TestComponent = React.lazy(() => import("./ExampleComponent"));

const App = () => {
  return (
    <div>
      <LazyBastard height={250}>
        <TestComponent name="Eva" />
      </LazyBastard>
    </div>
  );
};

export default App;