react-lazy-autoloader

    1.0.8 • Public • Published

    Build Status

    React Lazy Autoloader

    Lazy loading on scroll oder interval

    Features

    • Simple to use
    • Should work with all child elements
    • Can autoload children on interval
    • Can load children on scroll event
    • Works with different children heights when autoloading on interval (a main issue of other lazy renderers)
    • Detailed tutorial about this thing: http://www.devils-heaven.com/building-lazy-loader-react/

    Install

    npm install --save react-lazy-autoloader

    Usage

    import LazyLoad from 'react-lazy-autoloader';
     
    <LazyLoad autoLoad={true} autoLoadInterval={100} itemPadding={5}>
      {children}
    </LazyLoad>

    children is an array of React components or just divs or whatever.

    Options

    autoLoad (boolean)

    default: false

    If set to true, scroll loading is disabled and content will get autoloaded.

    autoLoadInterval (number)

    default: 100

    Sets the interval to load the next batch of items, only needed if autoLoad is set to true.

    itemPadding (number)

    default: 50

    Number of items to load initially and for each batch (when using autoloading).

    childrenHeight (number)

    default: 50

    General children height, only needed when using scroll loading. Can just be the height of the tallest child.

    onLoadFinished (function)

    Function to call when all items have been loaded - works with scroll loading and autoloading.

    Install

    npm i react-lazy-autoloader

    DownloadsWeekly Downloads

    18

    Version

    1.0.8

    License

    Apache-2.0

    Last publish

    Collaborators

    • ateufel