Co-located data loading for React Router apps. Data is loaded before the new screen renders. It is designed to be both a useful solution for many apps, as well as a reference implementation for integrating data with React Router (stuff like redux, relay, falcor etc).
For questions and support, please visit our channel on Reactiflux or Stack Overflow. The issue tracker is exclusively for bug reports and feature requests.
Using npm:
$ npm install async-props
Then with a module bundler like webpack, use as you would anything else:
// using an ES6 transpiler, like babel
import AsyncProps from 'async-props'The UMD build is also available on npmcdn:
<script src="https://npmcdn.com/async-props/umd/AsyncProps.min.js"></script>You can find the library on window.AsyncProps.
This is pre-release, but I think the code works as intended, just need to brush up the repository and add a few more tests.
import { Router, Route } from 'react-router'
import AsyncProps from 'async-props'
import React from 'react'
import { render } from 'react-dom'
class App extends React.Component {
// 1. define a `loadProps` static method
static loadProps(params, cb) {
cb(null, {
tacos: [ 'Pollo', 'Carnitas' ]
})
}
render() {
// 2. access data as props :D
const tacos = this.props.tacos
return (
<div>
<ul>
{tacos.map(taco => (
<li>{taco}</li>
))}
</ul>
</div>
)
}
}
// 3. Render `Router` with custom RoutingContext
render((
<Router RoutingContext={AsyncProps}>
<Route path="/" component={App}/>
</Router>
), el)import { renderToString } from 'react-dom/server'
import { match, RoutingContext } from 'react-router'
import AsyncProps, { loadPropsOnServer } from 'async-props'
app.get('*', (req, res) => {
match({ routes, location: req.url }, (err, redirect, renderProps) => {
// 1. load the props
loadPropsOnServer(renderProps, (err, asyncProps, scriptTag) => {
// 2. use `AsyncProps` instead of `RoutingContext` and pass it
// `renderProps` and `asyncProps`
const appHTML = renderToString(
<AsyncProps {...renderProps} {...asyncProps} />
)
// 3. render the script tag into the server markup
const html = createPage(appHTML, scriptTag)
res.send(html)
})
})
})
function createPage(html, scriptTag) {
return `
<!doctype html>
<html>
<!-- etc. --->
<body>
<div id="app">${html}</div>
<!-- its a string -->
${scriptTag}
</body>
</html>
`
}Please refer to the example, as it exercises the entire API. Docs will come eventually :)