Nutty Peanut Marshmallow

    @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;

    Keywords

    none

    Install

    npm i @react-goodies/lazy-bastard

    DownloadsWeekly Downloads

    13

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    9.35 MB

    Total Files

    81

    Last publish

    Collaborators

    • marborkowski.react