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
npm install --save react-with-observable create-subscription
Get a polyfill for Symbol.observable
if you need one (you most likely do).
npm install --save symbol-observable
Remember to import 'symbol-observable'
before rxjs
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:
const source$ = 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:
const source$ = 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:
const source$ = Observable.interval(1000);
// …
<Subscribe>
{source$.pipe(
map(val => 10 * val),
scan((acc, val) => acc + val, 0),
map(val => <input value={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 * as React from '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 contacts
export class ContactsList extends React.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 => (
<li key={contact.id}>
<Link to={`/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!