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

Props