1. Home
  2. /
  3. Preact
  4. /
  5. Counter with Dark Mode Only

Counter with Dark Mode Only - Preact Typing CST Test

Loading…

Counter with Dark Mode Only — Preact Code

Static counter with only dark/light theme toggle.

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;

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.

Primary Use Cases

  • ▸Small to medium web applications
  • ▸Mobile-first web apps
  • ▸Interactive widgets and components
  • ▸Progressive web apps (PWAs)
  • ▸High-performance client-side rendering

Notable Features

  • ▸Small bundle size (~3KB gzipped)
  • ▸React-compatible API
  • ▸Fast virtual DOM rendering
  • ▸Component-based architecture
  • ▸Optional ecosystem add-ons (preact/compat)

Origin & Creator

Created by Jason Miller and first released in 2015, Preact was designed as a lightweight alternative to React for high-performance web applications.

Industrial Note

Preact excels in projects where bundle size, speed, and React compatibility are crucial, such as mobile-first web apps, embedded widgets, and highly interactive UIs.

More Preact Typing Exercises

Preact Counter ComponentPreact Counter with Step IncrementPreact Counter with Max LimitPreact Counter with Auto-ResetPreact Counter with HistoryPreact Counter with Auto-IncrementPreact Counter with Conditional ThemePreact Full Featured Counter

Practice Other Languages

CReactPythonC++RustTypeScriptKotlinPHPJavaC#RubyMqlCqlN1qlCypher