Namibian Pyjama Merchant


    0.3.3 • Public • Published

    AsyncProps for React Router

    npm package #rackt on freenode

    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).

    Docs & Help

    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=""></script>

    You can find the library on window.AsyncProps.


    This is pre-release, it's pretty close though. If you are using it then you are a contributor. Please add tests with all pull requests.


    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 (
              { => (
    // 3. Render `Router` with AsyncProps middleware
      <Router render={(props) => <AsyncProps {...props}/>}>
        <Route path="/" component={App}/>
    ), 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)
    function createPage(html, scriptTag) {
      return `
        <!doctype html>
          <!-- etc. --->
            <div id="app">${html}</div>
            <!-- its a string -->


    Please refer to the example, as it exercises the entire API. Docs will come eventually :)


    npm i @dortzur/async-props

    DownloadsWeekly Downloads






    Last publish


    • dortzur