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>
  	<b>Time: </b> {time}
  </div>
);

// Create the composer function and tell how to fetch data
const composerFunction = (props, onData) => {
  if (props.alarm) {
    const error = new Error('Alarm is not implemeted yet!');
  	return onData(error);
  }
  
	const now = () => (
  	props.timestamp ? 
    Date.now() :
    new Date().toString()
  );
  	
	const handler = setInterval(() => {
    const time = now();
    onData(null, {time});
  }, 100);
  
  const cleanup = () => clearInterval(handler);
  return cleanup;
};

// Custom Error component
const ShowError = ({error}) => (
	<div style={{color: 'red', fontWeight: 800}}>
  	Error: {error.message}
  </div>
);

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

// Render the container
ReactDOM.render((
	<div>
  	<Clock />
    <Clock timestamp={true} />
    <Clock alarm={new Date('2016 Oct 10')} />
  </div>
), document.getElementById('react-root'));