react-with-observable

react-with-observable: use Observables declaratively in ⚛️ React!

• ✅ Supports any Observable implementation compatible with ECMAScript Observable (e.g. RxJS)!
• ✅ Inspired by the AsyncPipe from Angular!
• ✅ Very extensible by composing Observable operators!
• ✅ TypeScript definitions included!

It handles subscribing and unsubscribing automatically and, hence, you don't have to worry about memory leaks or updating state when new values come!

Inspired by the AsyncPipe from Angular. Uses React's create-subscription under the hood.

Install

npminstall--savereact-with-observablecreate-subscription

Get a polyfill for Symbol.observable if you need one (you most likely do).

npminstall--savesymbol-observable

Remember to import 'symbol-observable'beforerxjs or react-with-observable!

Usage

The component supports any Observable library compatible with the Observables for ECMAScript draft proposal.

Basics

This package exports a single named component Subscribe. It expects you to provide an Observable as its only child:

constsource$=Observable.of('Hello, world!');// …<Subscribe>{source$}</Subscribe>

This results in "Hello, world!" being displayed.

Reactivity

The component automatically updates whenever a new value is emitted by the Observable:

constsource$=Observable.interval(1000);// …<Subscribe>{source$}</Subscribe>

As a result, the next integer is displayed every second.

Operators

You can transform the Observable as you wish, as long as the final result is also an Observable:

constsource$=Observable.interval(1000);// …<Subscribe>{source$.pipe(map(val=>10*val),scan((acc,val)=>acc+val,0),map(val=><inputvalue={val}/>))}</Subscribe>

As the result, an <input> element is rendered. Its value is changed every second to 0, 10, 30, 60, 100, and so on.

Initial value

Use your Observable library! react-with-observable doesn't implement any custom way to provide the default value and it doesn't need to. For example, with RxJS, you can use the startWith operator:

<Subscribe>{source$.pipe(startWith(null))}</Subscribe>

Example

You can find more interactive examples here: https://mmiszy.github.io/react-with-observable/

import'symbol-observable';import*asReactfrom'react';import{Link}from'react-router-dom';import{map,startWith}from'rxjs/operators';import{Subscribe}from'react-with-observable';// myContacts$ is an Observable of an array of contactsexportclassContactsListextendsReact.Component{render(){return(<div><h2>My Contacts</h2><Subscribe>{myContacts$.pipe(startWith(null),map(this.renderList))}</Subscribe></div>);}renderList=(contacts)=>{if(!contacts){return'Loading…';}if(!contacts.length){return'You have 0 contacts. Add some!';}return(<ul>{contacts.map(contact=>(<likey={contact.id}><Linkto={`/courses/${contact.id}`}>{contact.fullName} — {contact.description}</Link></li>))}</ul>);};}

Bugs? Feature requests?

Feel free to create a new issue: issues. Pull requests are also welcome!