Co-located data loading for React Router
JavaScript Shell HTML
Permalink
Failed to load latest commit information.
example semis Mar 10, 2016
modules added deferred loading tests Mar 10, 2016
npm-scripts first Nov 17, 2015
scripts more package.json updates Nov 17, 2015
.babelrc update babel, quit using classes Mar 10, 2016
.eslintrc first Nov 17, 2015
.gitignore first Nov 17, 2015
.npmignore first Nov 17, 2015
.travis.yml first Nov 17, 2015
CHANGES.md Fixed a problem when no components have loadProps Nov 21, 2015
CONTRIBUTING.md first Nov 17, 2015
LICENSE.md first Nov 17, 2015
README.md Update README.md Jan 17, 2016
karma.conf.js first Nov 17, 2015
package.json Version 0.3.2 Mar 10, 2016
tests.webpack.js first Nov 17, 2015
webpack.config.js update babel, quit using classes Mar 10, 2016

README.md

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.

Installation

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.

Notes

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.

Usage

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 AsyncProps middleware
render((
  <Router render={(props) => <AsyncProps {...props}/>}>
    <Route path="/" component={App}/>
  </Router>
), el)

Server

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>
  `
}

API

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