bound-subject-decorator

    0.0.0-alpha.0 • Public • Published

    bound-subject-decorator

    A decorator for reducing boilerplate around using RxJS 5 Subjects in Components (like React or similar)

    Installation

    npm i -S bound-subject-decorator

    Usage

    By decorating any property that returns a Subject (or BehaviorSubject, et al) with @boundSubject, it binds the subject instance's next, error and complete methods to the subject instance, so they can be used with less boilerplate in components. This can be used in any framework or environment that might require this behavior.

    React.js Basic Example

    import * as React from 'react';
    import * as Rx from 'rxjs';
    import { boundSubject } from 'bound-subject-decorator';
     
    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = { count: 0 };
      }
     
      componentDidMount() {
        this.sub = this.clicks
          .scan(x => x + 1, 0)
          .subscribe(count => this.setState({ count }));
      }
     
      componentWillUnmount() {
        this.sub.unsubscribe();
      }
     
      // convert the `clicks` property to a function-subject!
      @boundSubject
      clicks = new Rx.Subject();
     
      render() {
        // now we can use `{this.clicks.next}` directly as a handler
        return (<div>
          <button onClick={this.clicks.next}>Click Me</button>
          <div>count: {this.state.count}</div>
        </div>);
      }
    }

    Install

    npm i bound-subject-decorator

    DownloadsWeekly Downloads

    1

    Version

    0.0.0-alpha.0

    License

    MIT

    Last publish

    Collaborators

    • blesh