Nosferatu's Pace Maker

    @mmiszy/react-with-observable
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.0 • Public • Published

    react-with-observable

    buddy pipeline codecov cypress dashboard npm npm bundle size (minified + gzip)

    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!

    Keywords

    none

    Install

    npm i @mmiszy/react-with-observable

    DownloadsWeekly Downloads

    9

    Version

    3.1.0

    License

    ISC

    Unpacked Size

    26.7 kB

    Total Files

    22

    Last publish

    Collaborators

    • mmiszy