Preact Clock

by tnhu

HTML

<script src="https://npmcdn.com/preact@latest/dist/preact.js"></script>

Babel + JSX

/** @jsx h */
const { h, render, Component } = preact;

class Avatar extends Component {
    constructor() {
    }

    componentDidMount() {
        // update time every second
        this.timer = setInterval(() => {
            this.setState({ time: Date.now() });
        }, 1000);
    }

    componentWillUnmount() {
        // stop when not renderable
        clearInterval(this.timer);
    }

    render(props, state) {
	    return
				<div class="avatar-container">
				  <img src="http://lorempixel.com/image_output/people-q-c-640-616-6.jpg"/>
		  		<div class="mask"></div>
				</div>
    }
}

render(<Avatar url="http://lorempixel.com/image_output/people-q-c-640-616-6.jpg" />, document.body);