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.
This repository was forked from Sam Bernard.
Installation
npm
npm install react-preloaded --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: PropTypesnode //Array of image urls to be preloaded images: PropTypesarray //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 //Whether or not we should mount the child content after //images have finished loading (or after autoResolveDelay) mountChildren: PropTypesbool
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.