React Kompose Clock Demo

A simple clock built with React Kompose

by arunoda

HTML

<script src="https://fb.me/react-0.14.5.js"></script>
<script src="https://fb.me/react-dom-0.14.5.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 {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 = () => {
	const time = new Date().toString();
  return new Promise((resolve) => {
  	setTimeout(() => resolve({time}), 2000);
  });
};
// Create the composer function and tell how to fetch data
const composerFunction = (props) => {
	return getServerTime();
};

// Custom loading message.
const Loading = () => (<p>Getting Server Time ...</p>);
// Compose the container
const Clock = composeWithPromise(composerFunction)(Time, Loading);

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