https://github.com/jayphelps/react-observable-subscribe

<Subscribe> component to automatically consume observables declaratively in React JSX
https://github.com/jayphelps/react-observable-subscribe

Last synced: 9 days ago
JSON representation

<Subscribe> component to automatically consume observables declaratively in React JSX

• Host: GitHub
• URL: https://github.com/jayphelps/react-observable-subscribe
• Owner: jayphelps
• License: mit
• Created: 2016-05-03T21:20:43.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-12-28T19:12:29.000Z (almost 7 years ago)
• Last Synced: 2024-10-19T17:58:20.819Z (19 days ago)
• Language: JavaScript
• Homepage:
• Size: 13.7 KB
• Stars: 133
• Watchers: 6
• Forks: 9
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
react-observable-subscribe

=========================

Subscribe to an Observable declaratively with the `{observable}` component.

## Install

```bash

npm install --save react-observable-subscribe

```

## Usage

This library's default export is a `Subscribe` component which you can use in your JSX to declaratively subscribe and render Observable streams. Just pass the observable as the only child to the the component.

You can apply any operators you want to your observable before passing it to ``--you don't have to use [RxJS v5.0](https://github.com/ReactiveX/rxjs), the only requirement is the the observable supports `observable[Symbol.observable]()` [from the proposed Observable spec](https://github.com/zenparsing/es-observable#observable).

*This library doesn't come with any actual Observable implementation itself.*

```jsx

import Subscribe from 'react-observable-subscribe';

// ...other imports

class Example extends Component {

  render() {

    return (

      


        


          
Every 100ms:

          


            {this.props.stream}

          

        

        


          
Every 1s:

          


            {this.props.stream.throttleTime(1000)}

          

        

        


          
Every 100ms w/ <input> element: 

          


            

              {this.props.stream.map(

                value => 

              )}

            

          

        

      

    );

  }

}


// This Observable will emit an incrementing

// number every 100ms

let stream = Observable.interval(100);

ReactDOM.render(, container);

```

![ezgif-79206338](https://cloud.githubusercontent.com/assets/762949/14999593/166d7bbe-113f-11e6-9097-69dd24b76781.gif)

The observable can emit simple primitives (e.g. strings, numbers) or you can even emit JSX elements! Each "onNext" just needs to be a single value, arrays are not supported because of React limitations.

When the observable emits new values, only the content inside `` will re-render, not the component in which you declare it, so it's very efficient.

Depending on your preferences, you might find it helpful to use a shorter name for `Subscribe` when you import it. Since it's the default export, what you name it is totally up to you:

```jsx

import Sub from 'react-observable-subscribe';

// etc



  {stream.throttleTime(1000)}



```

## Server-side rendering


If you do Server-side rendering with `React.renderToString`, it's important to note that since React doesn't support asynchronous rendering `` will `subscribe()` to the stream but then immediately `unsubscribe()`, so any *synchronously emitted* value will be rendered, otherwise nothing. One approach to emit a synchronous value in RxJS v5 is the [`startWith(value)`](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-startWith) operator, e.g. you might emit some "Loading..." text or `