Isomorphic library to lazy-load data for React components
- 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.
- React
v0.13.x
For browsers that don't nativeuly support promises, use ES6 Promise.
npm install --save react-resolverExample 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) {
return fetch(`/api/users?limit=${props.limit}`);
}
}
});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"));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);
});If you'd like to contribute to this project, all you need to do is clone this project and run:
$ npm install
$ npm testIf you have questions or issues, please open an issue!