rxx

Reactive JSX

Use Observables as JSX bindings

Installation

npm install --save rxx

Usage

import * as rxx from 'rxx';

const Counter = () => {
    const increments = new Subject()
    const decrements = new Subject()

    const count = merge(increments.mapTo(1), decrements.mapTo(-1))
        .scan((prev, change) => prev + change, 0)

    return (
        <div>
            {count}
            <button onclick={() => increments.next()}>+</button>
            <button onclick={() => decrements.next()}>-</button>   
        </div>
    )
}

document.body.appendChild(<Counter />)

Configuration

TypeScript

Add to tsconfig.json:

"jsx": "react",
"jsxFactory": "rxx.createElement",

Babel

Add to your .babelrc:

"plugins": [
  ["transform-react-jsx", {"pragma": "rxx.createElement"}]
]