React Preload
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 = 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: PropTypeselementisRequired // Rendered during load loadingIndicator: PropTypesnodeisRequired // Default: null // Array of image urls to be preloaded images: PropTypesarray // Default: [] // If set, the preloader will automatically show // the children content after this amount of time autoResolveDelay: PropTypesnumber // Error callback. Is passed the error onError: PropTypesfunc // Success callback onSuccess: PropTypesfunc // Whether or not we should still show the content // even if there is a preloading error resolveOnError: PropTypesbool // Default: true // Whether or not we should mount the child content after // images have finished loading (or after autoResolveDelay) mountChildren: PropTypesbool // 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.