Counter Component - Preact Typing CST Test

Counter Component — Preact Code

Basic Preact counter with dark/light theme toggle.

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;

Preact Language Guide

Preact is a fast, lightweight JavaScript library for building user interfaces with a React-like API. It emphasizes small bundle size, performance, and compatibility with modern web standards while providing an easy transition for React developers.

More Preact Typing Exercises

Practice Other Languages