Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/andreypopp/react-async

[DEPRECATED] Asynchronously fetch data for React components
https://github.com/andreypopp/react-async

Last synced: 7 days ago
JSON representation

[DEPRECATED] Asynchronously fetch data for React components

Awesome Lists containing this project

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.