Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andreypopp/react-async
[DEPRECATED] Asynchronously fetch data for React components
https://github.com/andreypopp/react-async
Last synced: about 1 month ago
JSON representation
[DEPRECATED] Asynchronously fetch data for React components
- Host: GitHub
- URL: https://github.com/andreypopp/react-async
- Owner: andreypopp
- License: mit
- Created: 2014-02-09T18:25:25.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2016-08-22T14:22:17.000Z (over 8 years ago)
- Last Synced: 2024-10-24T12:07:25.857Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 729 KB
- Stars: 445
- Watchers: 19
- Forks: 30
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components-all - react-async - Asynchronously fetch data for React components. (Uncategorized / Uncategorized)
- awesome-react-components - react-async - Asynchronously fetch data for React components. (Code Design / Props from server)
- awesome-list - react-async - Asynchronously fetch data for React components. (Code Design / Props from server)
- awesome-react-components - react-async - Asynchronously fetch data for React components. (Code Design / Props from server)
- awesome-react-components - react-async - Asynchronously fetch data for React components. (Code Design / Props from server)
README
# React Async
**VERSION DESCRIBED IN THIS DOCUMENT IS NOT RELEASED YET**
React Async provides a way for React components to subscribe for observable
values.## Installation
React Async is packaged on npm:
```sh
$ npm install react-async
```## Basic usage
React Async provides a component decorator `@Async` which given a set of
observable specifications wraps a regular React component and returns a new one
which subscribes to observables and re-renders the component when new data
arrives.The basic example looks like:
```js
import React from 'react';
import Async from 'react-async';
import Rx from 'rx';function defineXHRObservable(url) {
return {
id: url,
start() {
return Rx.fromPromise(fetch(url))
}
}
}function MyComponentObservables(props) {
return {
user: defineXHRObservable(`/api/user?user${props.userID}`)
}
}@Async(MyComponentObservables)
class MyComponent extends React.Component {render() {
let {user} = this.props
...
}}
```The `@Async` decorator injects data from observables via props so in `render()`
method of `` the `user` property will contain the data fetched
via XHR.## Rendering async components on server with fetched async state
While React provides `renderToString(element)` function which can produce markup
for a component, this function is synchronous. That means that it can't be used
when you want to get markup from server populated with data.React Async provides another version of `renderToString(element)` which is
asynchronous and fetches all data defined in observable specifications before
rendering a passed component tree.First, you'd need to install `fibers` package from npm to use that function:
```sh
$ npm install fibers
```Then use it like:
```js
import {renderToString} from 'react-async';renderToString(
,
function(err, markup) {
// send markup to browser
})
```This way allows you to have asynchronous components arbitrary deep in the
hierarchy.