JSFiddle - React, Tailwind, and code Playground

by mattpodwysocki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.1.2/rx.js"></script>
<div id="example" class="example">
    <div id="example-out" class="out">
    </div>
</div>

CSS

.example {
    position: relative;
    margin-top: 20px;
    height: 200px;
    border: 1px solid #ccc;
    background: #efefef;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.out {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    color: #666;
    text-align: center;
    line-height: 200px;
    font-family:'Inconsolata', sans-serif;
    font-size: 72px;
}

JavaScript

// Naive implementation just for demos instead of rx.dom.js
Rx.Observable.fromEvent = function (element, event) {
    return Rx.Observable.create(function (observer) {
        function handler(e) {
            observer.onNext(e);
        }
        
        element.addEventListener(event, handler, false);
        return function () {
            element.removeEventListener(event, handler, false);  
        };
    });
};
                                
var example = document.getElementById('example');
var out = document.getElementById('example-out');
    
function renderOutput (e) {
    out.innerHTML = e.offsetX + ', ' + e.offsetY;        
}
    
Rx.Observable.fromEvent(out, 'mousemove')
    .subscribe(renderOutput);