@react-goodies/lazy-bastard

1.1.0 • Public • Published

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
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
Opera
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;

Dependencies (0)

    Dev Dependencies (23)

    Package Sidebar

    Install

    npm i @react-goodies/lazy-bastard

    Weekly Downloads

    11

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    9.35 MB

    Total Files

    81

    Last publish

    Collaborators

    • marborkowski.react