Preact + Ionic

index.html

<!-- ionic embeds (see https://ionicframework.com/docs/intro/cdn#ionic-framework-cdn) -->
<!-- <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script> -->
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>

preact-ionic.markdown

Preact + Ionic

A Pen by Matt Daniel Brown on CodePen.

License.

script.babel

import 'https://cdn.skypack.dev/@ionic/core/dist/ionic/ionic.esm.js';
import { h, Fragment, Component, render } from 'https://cdn.skypack.dev/preact';
import { useState, useReducer } from 'https://cdn.skypack.dev/preact/hooks';
/** @jsx h */

function App() {
	const [mode, setMode] = useReducer((state, e) => e.detail.value, 'auto');
	const [count, increment] = useReducer(state => state + 1, 0);
	
	return (
		<Fragment>
			<ion-app mode={mode === 'auto' ? null : mode} key={mode}>
				<Header />

				<ion-page class="ion-page" id="main-content">
					<ion-header>
						<ion-toolbar>
							<ion-buttons slot="start">
								<ion-menu-toggle>
									<ion-button>
										<ion-icon slot="icon-only" name="menu"></ion-icon>
									</ion-button>
								</ion-menu-toggle>
							</ion-buttons>
							<ion-title>Header</ion-title>
						</ion-toolbar>
					</ion-header>
					<ion-content class="ion-padding">
						<h1>Preact + Ionic!</h1>
						<p>Click the icon in the top left to toggle the menu.</p>

						<ion-button onClick={increment}>
							Count: {count}
						</ion-button>

						<br />

						<ion-list>
							<ion-radio-group value={mode} onionChange={setMode}>
								<ion-list-header>
									<ion-label>Theme (mode)</ion-label>
								</ion-list-header>

								<ion-item>
									<ion-label>Automatic</ion-label>
									<ion-radio slot="start" value="auto"></ion-radio>
								</ion-item>

								<ion-item>
									<ion-label>Material Design</ion-label>
									<ion-radio slot="start" value="md"></ion-radio>
								</ion-item>

								<ion-item>
									<ion-label>iOS</ion-label>
									<ion-radio slot="start" value="ios"></ion-radio>
								</ion-item>
							</ion-radio-group>
						</ion-list>
					</ion-content>
				</ion-page>
			</ion-app>

			<ion-menu-controller />
		</Fragment>
	);
}

function Header() {
	return (
		<ion-menu content-id="main-content">
			<ion-header>
				<ion-toolbar color="primary">
					<ion-title>Menu</ion-title>
				</ion-toolbar>
			</ion-header>

			<ion-content>
				<ion-list>
					<ion-list-header>
						Navigate
					</ion-list-header>
					<ion-menu-toggle auto-hide="false">
						<ion-item button>
							<ion-icon slot="start" name='home'></ion-icon>
							<ion-label>
								Home
							</ion-label>
						</ion-item>
					</ion-menu-toggle>
				</ion-list>
			</ion-content>
		</ion-menu>
	);
}

render(<App />, document.body);