react-resolver

React Resolver

Isomorphic library to lazy-load data for React components

Checkout the examples!

Status

This project is undergoing eager, active development :)

• Define props as static.resolve
  • Resolve props that are Promises
  • Resolve props that have callbacks
  • Resolve props that are synchronous
• Server-side rendering
• Client-side rendering
  • With state changes

Installation

$ npm install --save react-resolver

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

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));
  });
});

---

Authors

• Eric Clemmons ([e-mail])

License

Changelog

v0.0.2 (2015-02-18)

• Working prototype with context