Learn PREACT with Real Code Examples
Updated Nov 22, 2025
Code Sample Descriptions
1
Preact Counter Component
import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';
function Counter() {
const [count, setCount] = useState(0);
const [isDark, setIsDark] = useState(false);
useEffect(() => {
const savedCount = localStorage.getItem('count');
if (savedCount) setCount(parseInt(savedCount, 10));
}, []);
useEffect(() => {
localStorage.setItem('count', count.toString());
}, [count]);
return (
<div className={isDark ? 'dark-theme' : 'light-theme'}>
<h2>Counter: {count}</h2>
<div>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
<button onClick={() => setIsDark(!isDark)}>Switch to {isDark ? 'Light' : 'Dark'} Theme</button>
</div>
);
}
export default Counter;
Basic Preact counter with dark/light theme toggle.
2
Preact Counter with Step Increment
import { h } from 'preact';
import { useState } from 'preact/hooks';
function StepCounter() {
const [count, setCount] = useState(0);
const step = 2;
return (
<div>
<h2>Counter: {count}</h2>
<button onClick={() => setCount(count + step)}>+</button>
<button onClick={() => setCount(count - step)}>-</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
);
}
export default StepCounter;
Counter increments/decrements by a step value using Preact.
3
Preact Counter with Max Limit
import { h } from 'preact';
import { useState } from 'preact/hooks';
function MaxCounter() {
const [count, setCount] = useState(0);
const max = 5;
return (
<div>
<h2>Counter: {count}</h2>
<button onClick={() => count < max && setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
);
}
export default MaxCounter;
Stops incrementing after a maximum count is reached.
4
Preact Counter with Auto-Reset
import { h } from 'preact';
import { useState } from 'preact/hooks';
function AutoResetCounter() {
const [count, setCount] = useState(0);
const threshold = 10;
const increment = () => setCount(c => (c + 1 > threshold ? 0 : c + 1));
return (
<div>
<h2>Counter: {count}</h2>
<button onClick={increment}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
);
}
export default AutoResetCounter;
Automatically resets when counter exceeds threshold.
5
Preact Counter with History
import { h } from 'preact';
import { useState } from 'preact/hooks';
function HistoryCounter() {
const [count, setCount] = useState(0);
const [history, setHistory] = useState([]);
const increment = () => { setCount(count + 1); setHistory([...history,'Increment']); };
const decrement = () => { setCount(count - 1); setHistory([...history,'Decrement']); };
const reset = () => { setCount(0); setHistory([...history,'Reset']); };
return (
<div>
<h2>Counter: {count}</h2>
<div>History: {history.join(', ')}</div>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
<button onClick={reset}>Reset</button>
</div>
);
}
export default HistoryCounter;
Tracks increment/decrement history.
6
Preact Counter with Dark Mode Only
import { h } from 'preact';
import { useState } from 'preact/hooks';
function DarkModeCounter() {
const [isDark, setIsDark] = useState(false);
return (
<div className={isDark ? 'dark-theme' : 'light-theme'}>
<h2>Counter: 0</h2>
<button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
</div>
);
}
export default DarkModeCounter;
Static counter with only dark/light theme toggle.
7
Preact Counter with Auto-Increment
import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';
function AutoIncrementCounter() {
const [count, setCount] = useState(0);
useEffect(() => { const interval = setInterval(() => setCount(c => c + 1), 1000); return () => clearInterval(interval); }, []);
return <h2>Counter: {count}</h2>;
}
export default AutoIncrementCounter;
Automatically increments counter every second.
8
Preact Counter with Conditional Theme
import { h } from 'preact';
import { useState } from 'preact/hooks';
function ConditionalThemeCounter() {
const [count, setCount] = useState(0);
const isDark = count % 2 === 0;
return (
<div className={isDark ? 'dark-theme' : 'light-theme'}>
<h2>Counter: {count}</h2>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
);
}
export default ConditionalThemeCounter;
Theme changes automatically based on even/odd counter value.
9
Preact Full Featured Counter
import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';
function FullCounter() {
const [count, setCount] = useState(0);
const [history, setHistory] = useState([]);
const [isDark, setIsDark] = useState(false);
const step = 2, max = 10;
useEffect(() => { const interval = setInterval(() => { setCount(c => { let n = c + step; if(n > max) n = 0; setHistory(h => [...h,'Auto Increment']); return n; }); },1000); return () => clearInterval(interval); }, []);
const increment = () => { setCount(c => c + step); setHistory(h => [...h,'Increment']); };
const decrement = () => { setCount(c => c - step); setHistory(h => [...h,'Decrement']); };
const reset = () => { setCount(0); setHistory(h => [...h,'Reset']); };
return (
<div className={isDark ? 'dark-theme' : 'light-theme'}>
<h2>Counter: {count}</h2>
<div>History: {history.join(', ')}</div>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
<button onClick={reset}>Reset</button>
<button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
</div>
);
}
export default FullCounter;
Combines step increment, max limit, auto-reset, history, auto-increment, and theme toggle.