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;