rp

react-preload

Component to preload images before showing content

Showing:

Popularity

Downloads/wk

1K

GitHub Stars

148

Maintenance

Last Commit

3yrs ago

Contributors

9

Package

Dependencies

0

Size (min+gzip)

1.3KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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.

Installation

npm

npm install react-preload --save

Usage

var Preload = require('react-preload').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.isRequired, // Default: null

    // Array of image urls to be preloaded
    images: PropTypes.array, // Default: []

    // 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, // Default: true

    // Whether or not we should mount the child content after
    // images have finished loading (or after autoResolveDelay)
    mountChildren: PropTypes.bool, // Default: true
}

Additional Details

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

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial