Skip to content

Instantly share code, notes, and snippets.

@herdianf

herdianf/preact.html

Created October 7, 2022 04:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save herdianf/92e818d1a262880a164b1775dcce2258 to your computer and use it in GitHub Desktop.
Save herdianf/92e818d1a262880a164b1775dcce2258 to your computer and use it in GitHub Desktop.
Download ZIP
Preact No Build UMD
Raw
preact.html
<!DOCTYPE html>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1, minimal-ui">
<title>Preact</title>
<div id=app>
<h1>Hello World!</h1>
<!-- comments -->
<p style="background-color: lime;">Preloading text...</p>
<p>Count = 0</p>
Original text from HTML<br>
</div>
<script src="https://unpkg.com/preact@10.11.1/dist/preact.min.umd.js"></script>
<script src="https://unpkg.com/preact@10.11.1/hooks/dist/hooks.umd.js"></script>
<script>
const {h, render} = preact;
const {useEffect, useState} = preactHooks;
function App() {
const [count, setCount] = useState(0);
const startTiming = () => setTimeout(() => setCount(count+1), 1000);
useEffect(() => {
startTiming();
}, [count]);
return [
h('h1', null, 'Hello Preact!'),
h('p', {
onClick: e => {
let toggle = e.target.getAttribute('data-toggle')
e.target.style.color = toggle === '1' ? '#000000' : '#ff00ff';
e.target.setAttribute('data-toggle', toggle === '1' ? '0' : '1')
},
style: 'transition: all .1s linear; background-color: ' + (count & 1 ? 'cyan' : 'lime'),
}, 'Time now is: ' + new Date()),
h('p', null, 'Seconds from load = ' + count)
];
}
render(h(App), document.getElementById('app'));
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment