GitHub - ryanflorence/async-props: Co-located data loading for React Router (original) (raw)

AsyncProps for React Router

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:

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 (

{taco}

) } }

// 3. Render Router with AsyncProps middleware render(( <Router render={(props) => <AsyncProps {...props}/>}> ), 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 `

${html}

    <!-- its a string -->
    ${scriptTag}
  </body>
</html>

` }

API

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