React Preload
A React component to preload images. It renders a passed component during the loader phase, and renders it's 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: ReactPropTypesnodeisRequired //Rendered during load loadingIndicator: ReactPropTypesnodeisRequired //Array of image urls to be preloaded images: ReactPropTypesarray //If set, the preloader will automatically show //the children content after this amount of time autoResolveDelay: ReactPropTypesnumber //Error callback. Is passed the error onError: ReactPropTypesfunc //Success callback onSuccess: ReactPropTypesfunc //Whether or not we should still show the content //even if there is a preloading error resolveOnError: ReactPropTypesbool //Whether or not we should mount the child content after //images have finished loading (or after autoResolveDelay) mountChildren: ReactPropTypesbool
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.