You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

async-props

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

async-props

Co-located component data fetching for React Router

0.1.1
Source
npmnpm
Version published
Maintainers
1
Created
Source

AsyncProps for React Router

npm package #rackt on freenode

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, but I think the code works as intended, just need to brush up the repository and add a few more tests.

Usage

Client

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

// with createClass
var App = React.createClass({
  statics: {
    loadProps: function(params, cb) {
      cb(null, {
        tacos: [ 'Pollo', 'Carnitas' ]
      })
    }
  },

  // ...
})

// 3. Render `Router` with custom RoutingContext
render((
  <Router RoutingContext={AsyncProps}>
    <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>
  `
}

Keywords

react
react router
data

FAQs

Package last updated on 17 Nov 2015

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Crates.io Implements Trusted Publishing Support

Security News

Crates.io Implements Trusted Publishing Support

Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.

By Sarah Gooding  -  Jul 16, 2025