https://github.com/ryanflorence/async-props

Co-located data loading for React Router
https://github.com/ryanflorence/async-props

Last synced: 8 days ago
JSON representation

Co-located data loading for React Router

• Host: GitHub
• URL: https://github.com/ryanflorence/async-props
• Owner: ryanflorence
• License: mit
• Created: 2015-11-17T08:29:40.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-01-31T20:38:34.000Z (almost 8 years ago)
• Last Synced: 2024-05-11T11:20:23.208Z (8 months ago)
• Language: JavaScript
• Size: 69.3 KB
• Stars: 566
• Watchers: 18
• Forks: 48
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGES.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-react-components-all - async-props - Co-located data loading for React Router. (Uncategorized / Uncategorized)
• awesome-list - async-props - Co-located data loading for React Router. (Code Design / Props from server)

README

        
# AsyncProps for React Router

[![npm package](https://img.shields.io/npm/v/async-props.svg?style=flat-square)](https://www.npmjs.org/package/async-props)

[![#rackt on freenode](https://img.shields.io/badge/irc-rackt_on_freenode-61DAFB.svg?style=flat-square)](https://webchat.freenode.net/)

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

- [Changelog](/CHANGES.md)

- [#react-router @ Reactiflux](https://discord.gg/0ZcbPKXt5bYaNQ46)

- [Stack Overflow](http://stackoverflow.com/questions/tagged/react-router)

For questions and support, please visit [our channel on Reactiflux](https://discord.gg/0ZcbPKXt5bYaNQ46) or [Stack Overflow](http://stackoverflow.com/questions/tagged/react-router). The issue tracker is *exclusively* for bug reports and feature requests.

## Installation

Using [npm](https://www.npmjs.com/):

    $ npm install async-props

Then with a module bundler like [webpack](https://webpack.github.io/), use as you would anything else:

```js

// using an ES6 transpiler, like babel

import AsyncProps from 'async-props'

```

The UMD build is also available on [npmcdn](https://npmcdn.com):

```html

```

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

```js

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 (

      


        


          {tacos.map(taco => (

            
{taco}

          ))}

        

      

    )

  }

}


// 3. Render `Router` with AsyncProps middleware

render((

   }>

    

  

), el)

```

### Server

```js

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(

        

      )

      // 3. render the script tag into the server markup

      const html = createPage(appHTML, scriptTag)

      res.send(html)

    })

  })

})

function createPage(html, scriptTag) {

  return `

    

    

      

      

        
${html}


        

        ${scriptTag}

      

    

  `

}

```

## API

Please refer to the example, as it exercises the entire API. Docs will

come eventually :)