React Kompose Clock Demo

A simple clock built with React Kompose

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://cdn.rawgit.com/kadirahq/react-komposer/master/dist/browser.min.js"></script>
<div id="react-root">
</div>

Babel + JSX

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

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

// Assume this get's the time from the Server
const getServerTime = () => {
	return new Promise((resolve) => {
    const time = new Date().toString();
  	setTimeout(() => resolve({time}), 2000);
  });
};

// Create the composer function and tell how to fetch data
const composerFunction = (props) => {
	return getServerTime();
};

// Compose the container
const Loading = () => (<p>Waiting for Server Time ...</p>);
const Clock = composeWithPromise(composerFunction)(Time, Loading);

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