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

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

// Create the composer function and tell how to fetch data
const composerFunction = (props, onData) => {
	const handler = setInterval(() => {
  	const time = new Date().toString();
    onData(null, {time});
  }, 1000);
  
  const cleanup = () => clearInterval(handler);
  return cleanup;
};

// Compose the container
const Clock = ReactKomposer.compose(composerFunction)(Time);

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