JSFiddle - React, Tailwind, and code Playground

by mattpodwysocki

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.2/rx.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.2/rx.binding.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.2/rx.async.js"></script>

<div id="results">0,0</div>

JavaScript

var proto;
if ('Zepto' in window && Zepto.fn) {
    proto = Zepto.fn;
} else if ('jQuery' in window && jQuery.fn) {
    proto = jQuery.fn;
}
if (proto) {
    /** 
     * Takes the current selector and converts it into an observable sequence with the given event name.
     * @param {String} eventName The event name to bind to the observable sequence.
     * @returns {Observable} An observable sequence which wraps the existing event stream based upon selector
     */
    proto.asObservable = function (eventName) {
       return Rx.Observable.fromEvent(this, eventName);
    };
}

var $results = $('#results');

var subscription = $(document).asObservable('mousemove')
    .subscribe(function (e) {
        $results.text(e.clientX + ',' + e.clientY);
    });