Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryanflorence/async-props
Co-located data loading for React Router
https://github.com/ryanflorence/async-props
Last synced: 20 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 (7 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 :)