React Kompose Clock with Rx.js

A simple clock built with React Kompose and Rx.js

by arunoda

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.7/rx.all.compat.min.js"></script>
<script src="https://cdn.rawgit.com/kadirahq/react-komposer/master/dist/browser.min.js"></script>
<div id="react-root">
</div>

Babel + JSX

// Import the compose function, you may get this via NPM.
// const {composeWithObservable} = require('react-komposer');
// import {composeWithObservable} from 'react-komposer'
const {composeWithObservable} = ReactKomposer;

// Create a component to display Time
const Time = ({time}) => (<div>{time}</div>);

const now = Rx.Observable.interval(1000)
	.map(() => ({time: new Date().toString()}));

// Create the composer function and tell how to fetch data
const composerFunction = (props) => now;

// Compose the container
const Clock = composeWithObservable(composerFunction)(Time);

// Render the container
ReactDOM.render(<Clock />, document.getElementById('react-root'));