Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/typeofweb/react-with-observable
Use Observables with React declaratively!
https://github.com/typeofweb/react-with-observable
jsx observable react reactjs rxjs
Last synced: 2 months ago
JSON representation
Use Observables with React declaratively!
- Host: GitHub
- URL: https://github.com/typeofweb/react-with-observable
- Owner: typeofweb
- License: isc
- Created: 2018-06-29T08:02:22.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-09T19:36:05.000Z (over 1 year ago)
- Last Synced: 2024-05-05T22:23:13.127Z (5 months ago)
- Topics: jsx, observable, react, reactjs, rxjs
- Language: TypeScript
- Homepage: https://mmiszy.github.io/react-with-observable/
- Size: 4.23 MB
- Stars: 110
- Watchers: 3
- Forks: 1
- Open Issues: 48
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-star-libs - mmiszy / react-with-observable
README
# react-with-observable
[](https://app.buddy.works/mmiszy/react-with-observable/pipelines/pipeline/225575)
[](https://codecov.io/gh/mmiszy/react-with-observable)
[](https://dashboard.cypress.io/#/projects/dmnv1v/runs)
[](https://www.npmjs.com/package/react-with-observable)
[](https://www.npmjs.com/package/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`](https://github.com/facebook/react/tree/master/packages/create-subscription) under the hood.
## Install
```javascript
npm install --save react-with-observable create-subscription
```
Get a polyfill for `Symbol.observable` if you need one (you most likely do).
```javascript
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](https://github.com/tc39/proposal-observable).
### Basics
This package exports a single named component `Subscribe`. It expects you to provide an Observable as its only child:
```javascript
const source$ = Observable.of('Hello, world!');
// …
{source$}
```
This results in "Hello, world!" being displayed.
### Reactivity
The component automatically updates whenever a new value is emitted by the Observable:
```javascript
const source$ = Observable.interval(1000);
// …
{source$}
```
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:
```javascript
const source$ = Observable.interval(1000);
// …
{source$.pipe(
map(val => 10 * val),
scan((acc, val) => acc + val, 0),
map(val => )
)}
```
As the result, an `` 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:
```javascript
{source$.pipe(
startWith(null)
)}
```
## Example
You can find more interactive examples here: https://mmiszy.github.io/react-with-observable/
```javascript
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 (
My Contacts
{myContacts$.pipe(
startWith(null),
map(this.renderList)
)}
);
}
renderList = (contacts) => {
if (!contacts) {
return 'Loading…';
}
if (!contacts.length) {
return 'You have 0 contacts. Add some!';
}
return (
-
{contact.fullName} — {contact.description}
{contacts.map(contact => (
))}
);
};
}
```
## Bugs? Feature requests?
Feel free to create a new issue: [issues](https://github.com/mmiszy/react-with-observable/issues). Pull requests are also welcome!