Neatly Packaged Modules

    react-preloaded

    1.0.0 • Public • Published

    React Preload

    npm version

    A React component to preload images. It renders a passed component during the loader phase, and renders its children once the images have been successfully fetched.

    This repository was forked from Sam Bernard.

    Installation

    npm

    npm install react-preloaded --save

    Usage

    var Preload = require('react-preloaded').Preload;
    var loadingIndicator = (<div>Loading...</div>);
    var images = [];
     
    <Preload
      loadingIndicator={loadingIndicator}
      images={images}
      autoResolveDelay={3000}
      onError={this._handleImageLoadError}
      onSuccess={this._handleImageLoadSuccess}
      resolveOnError={true}
      mountChildren={true}
    >
        {/* content to be rendered once loading is complete*/}
    </Preload>

    Prop types

       propTypes: {
            //Rendered on success
            children: PropTypes.element.isRequired,
     
            //Rendered during load
            loadingIndicator: PropTypes.node,
     
            //Array of image urls to be preloaded
            images: PropTypes.array,
     
            //If set, the preloader will automatically show
            //the children content after this amount of time
            autoResolveDelay: PropTypes.number,
     
            //Error callback. Is passed the error
            onError: PropTypes.func,
     
            //Success callback
            onSuccess: PropTypes.func,
     
            //Whether or not we should still show the content
            //even if there is a preloading error
            resolveOnError: PropTypes.bool
     
            //Whether or not we should mount the child content after
            //images have finished loading (or after autoResolveDelay)
            mountChildren: PropTypes.bool
        }

    Additional Details

    This module also exposes ImageCache and ImageHelper which can be used to preload images directly, and can be accessed via require('react-preloaded').ImageCache and require('react-preloaded').ImageHelper respectively.

    License

    MIT

    Install

    npm i react-preloaded

    DownloadsWeekly Downloads

    173

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • rwoverdijk