A React component for managing loads with a load queue
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
standalone
test
vendor/react
.bowerrc
.gitignore
.npmignore
LICENSE
README.md
bower.json Release 1.0.3 Jul 21, 2014
coffeelint.json Project skeleton and initial implementation Jun 11, 2014
gulpfile.coffee
gulpfile.js Project skeleton and initial implementation Jun 11, 2014
package.json
webpack.config.coffee

README.md

react-loadqueueloader

Sometimes you want to take the decisions about what to load and when from the browser, but still reap the benefits of queuing and prioritizing that the browser is capable of. A load queue (such as queueup.js) allows you to manage and prioritize loads in just such a way, and this React component allows an easy way of hooking asset loading for components into a load queue.

Basic Usage

var LoadQueueLoader = require('react-loadqueueloader');

// ...

<LoadQueueLoader
  src="/path/to/image.jpg"
  priority={ 1 }
  loader={ React.DOM.img }
/>

While the above example nicely illustrates basic usage, it neglects a crucial piece of the puzzle: the load queue!

Load Queue

When you render the LoadQueueLoader component, you want to do so with a loadQueue (such as queueup.js) in context (using React.withContext). For example:

var LoadQueueLoader = require('react-loadqueueloader');
var queue = require('queueup')();
var LoadQueue = React.createClass({
  render: function() {
    React.withContext({loadQueue: queue}, <div>{ this.props.children }</div>);
  }
});

// ...

<LoadQueue>
  <LoadQueueLoader src="/path/to/image.jpg" loader={ React.DOM.img } />
</LoadQueue>

Context

Name Type Description
loadQueue object An object that manages loads in a queue. It is expected to have an enqueue method that takes a function that performs the load. When the load queue is ready to load an asset, it should call the provided function, passing it a callback. That callback will be called when the load completes or errors.

Props

Name Type Description
loader function A React class or other function that returns a component instance that loads a src. The instance should also accept onLoad and onError callbacks. Required.
src string The URL of the image to be loaded.
priority number The priority to assign to this load, relative to other loads in the queue. This prop has no effect if there is no loadQueue in the component context. Defaults to 0
onLoad function An optional callback to be called when the load finishes.
onError function An optional callback to be called if the load fails.