React Kompose Clock Demo
A simple clock built with React Kompose
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" align ="center">
CiAonm
<div style="width:90px; height:50px; " >
<div style="width:30px; height:50px; background-color:#ff0000;" >
</div>
<div style="width:30px; height:50px; background-color:#ff0000;" >
</div>
</div>
</div>
React
// 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'));