react-resolver

React Resolver

Isomorphic library to lazy-load data for React components

Inspired by ui-router for Angular, React Resolver allows you to:

• Define & lazy-load component data dependencies and inject them as props.
• Express/Koa/Hapi-friendly server-side rendering.
• Progressive, client-side rendering.
• Works with React Router!
• Similar goals as Facebook's Relay

Checkout the examples!

Installation

$ npm install --save react-resolver

var Resolver = require('react-resolver');

// Create an instance
var resolver = new Resolver();

// or, if you prefer factories...
var resolver = Resolver.create();

Usage

1. Specify Props to Lazy-Load

var UserView = React.createClass({
  statics: {
    resolve: {
      // Return a Promise
      user: function() {
        return UserStore.find(this.getParams().userId);
      },

      // or use a Callback
      user: function(done) {
        request.get(`/users/${this.getParams().userId}`, done);
      }
    }
  },
  ...
});

2. Wrap your <Route />

Assuming you're using React Router, you'll need to wrap your routes to maintain context:

var resolver  = require('resolver').create();
var routes    = resolver.route(require('./routes'));

This makes it possible for your statics.resolve props to access Router.State, Router.Navigation, and other contexts.

3. Resolve & Render

var resolver  = require('resolver').create();
var routes    = resolver.route(require('./routes'));

Router.run(routes, function(Handler) {
  resolver.handle(Handler).then(function(resolved) {
    // On the Client
    React.render(resolved, document.getElementById('app'));

    // on the Server
    res.send(React.renderToStaticMarkup(resolved));
  });
});

Remember, if you're rendering on the server you want a new instance of Resolver for each request!

---

Development

$ npm install
$ npm start

Testing

$ npm test

Authors

• Eric Clemmons ([e-mail])

License