Repository files navigation

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

• ✅ Supports any Observable implementation compatible with ECMAScript Observable (e.g.RxJS)!
• ✅ Inspired by theAsyncPipe 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 theAsyncPipe from Angular. Uses React'screate-subscription under the hood.

npminstall--savereact-with-observablecreate-subscription

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

npminstall--savesymbol-observable

Remember toimport 'symbol-observable'beforerxjs orreact-with-observable!

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

This package exports a single named componentSubscribe. 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.

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.

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.

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 thestartWith operator:

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

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>);};}

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