rx-handler-decorator

    0.0.0-alpha.0 • Public • Published

    rx-handler-decorator

    A decorator for making an RxJS 5 Subject into a handler for user events

    Installation

    npm i -S rx-handler-decorator

    Usage

    By decorating any property that returns a Subject (or BehaviorSubject, et al) with @rxHandler, it converts that property into a handler function, that also has all of the methods of the original subject reference.

    This can be used in any framework or environment that might require this behavior. It also automatically binds the handler function to the reference, so there's no need to use something like .bind() or core-decorators autobind on the resulting handler method.

    Angular 2 Basic Example

    import { Component } from 'angular/core';
    import { rxHandler } from 'rx-handler-decorator';
    import * as Rx from 'rxjs';
     
    @Component({
        selector: 'my-app',
        template: `<div>
          <button (click)="clicks()">Click Me</button>
          <div>count: {{count | async}}</div>
        </div>`
    })
    class MyComponent {
      @rxHandler
      clicks = new Rx.Subject();
     
      get count() {
        return this.clicks
          .scan(x => x + 1, 0);
      }
    }

    React.js Basic Example

    import * as React from 'react';
    import * as Rx from 'rxjs';
    import { rxHandler } from 'rx-handler-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!
      @rxHandler
      clicks = new Rx.Subject();
     
      render() {
        // now we can use `{this.clicks}` directly as a handler
        return (<div>
          <button onClick={this.clicks}>Click Me</button>
          <div>count: {this.state.count}</div>
        </div>);
      }
    }

    Install

    npm i rx-handler-decorator

    DownloadsWeekly Downloads

    1

    Version

    0.0.0-alpha.0

    License

    MIT

    Last publish

    Collaborators

    • blesh