srph/react-resolver

Isomorphic library to recursively lazy-load data for React components

React Resolver

Isomorphic library to lazy-load data for React components

Features

• Promise-based – Define & lazy-load component data dependencies and inject them as props.
• Isomorphic – Express/Koa/Hapi-friendly server-side rendering & progressive, client-side rendering.
• Test friendly – Containers promote separation between data-fetching & rendering.

Demo

View Demo

---

• Features
• Demo
• Requirements
• Installation
• Usage
  • Client
  • Server
• Changelog
• Development
• Authors
• License

---

Requirements

• React v0.13.x

For browsers that don't nativeuly support promises, use ES6 Promise.

Installation

npm install --save react-resolver

---

Usage

Example is based on Stargazers.js in the demo.

Suppose you want to display list of users, but that data is loaded asynchronously via an API.

Rather than having your component handle data-fetching and rendering, you can create a "container" that fetches the data and only renders when ready:

import React from "react";
import { Resolver } from "react-resolver";

class Users extends React.Component {
  render() {
    return (
      <ul>
        {this.props.users.map(user => (
          <li>{user}</li>
        ))}
      </ul>
    );
  }
}

Users.defaultProps = { limit: 5 };
Users.propTypes = { users: React.PropTypes.array.isRequired };

// Rather than `export default Users`, create a container:
export default Resolver.createContainer(Users, {
  resolve: {
    users: function(props, context) {
      return fetch(`/api/users?limit=${props.limit}`);
    }
  }
});

If you use React Router (or anything else) that uses context, you can get access to these values via:

Resolver.createContainer(Users, {
  contextTypes: {
    router: React.PropTypes.func.isRequired
  },

  resolve: {
    user: function(props, context) {
      const { login } = context.router.getCurrentParams();

      return fetch(`/api/users/${login}`);
    }
  }
});

For a working example of this, check out User.js in the demo.

Client

Replace React.render with Resolver.render, and you're all set!

import React from "react";
import Resolver from "react-resolver";

Resolver.render(<Users />, document.getElementById("app"));

Server

Because data has to be fetched asynchronously, React.renderToString (and React.renderToStaticMarkup) won't have the data in time.

Instead, replace React with Resolver and you'll receive a promise that resolves with the rendered output!

import React from "react";
import Resolver from "react-resolver";

Resolver.renderToString(<Users />).then((string) => {
  reply(string);
}).catch((err) {
  // An error was thrown while rendering
  console.error(err);
});

---

Development

If you'd like to contribute to this project, all you need to do is clone this project and run:

$ npm install
$ npm test

Authors

• Eric Clemmons (@ericclemmons)

License

Collaboration

If you have questions or issues, please open an issue!