react-images-queue v0.0.6
React Images Queue
This dead simple React HOC allows you to preload images with queueing, specifying number of concurrent images being loaded and reordering images queue
Example
import React from "react";
import { imagesQueue } from "react-images-queue";
class Photo extends React.Component {
state = {
activePhoto: 0
}
handleClick = () => {
this.setState({activePhoto: this.props.photos.length - 1 })
//reorder method is provided by React Images Queue
//in this example it sets last photo on first position in loading queue
this.props.reorder(this.props.photos[this.props.photos.length - 1].url)
}
render () {
const photo = this.props.photos[this.state.activePhoto]
//processedImages is provided by React Images Queue
return (
<div>
<ActivePhoto
photo={photo}
isLoaded={this.props.processedImages.map(image=>image.src).indexOf(photo.url) > -1}
/>
<button onClick={this.handleClick}>Last photo</button>
</div>
);
}
};
export default imagesQueue(props => props.photos.map(photo => photo.url), {size: 2})(Photo)
Installation
npm install react-images-queue --save
Usage
imagesQueue(images, config)
Higher Order Component that wraps other component, gets images and config object as arguments and return wrapped component with injected processed images and reorder method as props.
Arguments
images
(String or Array or Function): Provides images to load
String
export default imagesQueue('http://images.example/1', {size: 2})(Photo)
Array
export default imagesQueue(['http://images.example/1', 'http://images.example/2', 'http://images.example/3'], {size: 2})(Photo)
Function
export default imagesQueue(props => props.photos.map(photo => photo.url), {size: 2})(Photo)
config
(Object): Currently allows you to definesize
property which specifies a number of images loading concurrentlyReturns
imagesQueue
returns wrapped component with extra props:processedImages
(Array): It is an array of objects representing images that loading has been finished with success or error. Each object has following properties:src (String) - src of loaded image
status (String) - loading image status
'error'
or'success'
time (Number) - UNIX timestamp of finished loading
reorder( reorderedImages )
(Function): It is a method that change order of images waiting to be loaded (images queue). You can passstring
,array
orfunction
as argument. Ifstring
orarray
is passed proper images (or images) are placed on the top of a queue. Iffunction
is passed it takes current queue as parameter and should return new queue. Queue is an array of objects with properties:src
andcallback
.License
MIT