Learn IONIC with Real Code Examples

import React, { useState } from 'react';
import { IonApp, IonContent, IonButton, IonHeader, IonTitle, IonToolbar, IonText } from '@ionic/react';

const Counter = () => {
    const [count, setCount] = useState(0);
    const [isDark, setIsDark] = useState(false);

    const toggleTheme = () => {
        setIsDark(!isDark);
        document.body.className = isDark ? 'light-theme' : 'dark-theme';
    };

    return (
        <IonApp>
        <IonHeader>
        <IonToolbar>
        <IonTitle>Ionic Counter</IonTitle>
        </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding" style={{ textAlign: 'center' }}>
        <IonText><h2>Counter: {count}</h2></IonText>
        <IonButton color="primary" onClick={() => setCount(count + 1)}>+</IonButton>
        <IonButton color="danger" onClick={() => setCount(count - 1)}>-</IonButton>
        <IonButton color="medium" onClick={() => setCount(0)}>Reset</IonButton>
        <br /><br />
        <IonButton color="tertiary" onClick={toggleTheme}>Switch Theme</IonButton>
        </IonContent>
        </IonApp>
    );
};

export default Counter;

Demonstrates a simple counter layout using Ionic React components and React for interactivity.

import React, { useState } from 'react';
import { IonApp, IonContent, IonButton, IonHeader, IonTitle, IonToolbar, IonText } from '@ionic/react';

const Counter = () => {
    const [count, setCount] = useState(0);
    const [double, setDouble] = useState(false);

    return (
        <IonApp>
        <IonHeader>
        <IonToolbar>
        <IonTitle>Toggle Counter</IonTitle>
        </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding" style={{ textAlign: 'center' }}>
        <IonText><h2>Counter: {count}</h2></IonText>
        <IonButton onClick={() => setCount(count + (double ? 2 : 1))}>+</IonButton>
        <IonButton onClick={() => setCount(count - (double ? 2 : 1))}>-</IonButton>
        <IonButton onClick={() => setCount(0)}>Reset</IonButton>
        <br /><br />
        <IonButton onClick={() => setDouble(!double)}>Toggle Double: {double ? 'ON' : 'OFF'}</IonButton>
        </IonContent>
        </IonApp>
    );
};

export default Counter;

Demonstrates a counter with an additional toggle button to double the increment in Ionic React.

<ion-header>
    <ion-toolbar>
        <ion-title>Ionic Angular Counter</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content class="ion-padding" style="text-align:center">
    <h2>Counter: {{ count }}</h2>
    <ion-button (click)="increment()">+</ion-button>
    <ion-button (click)="decrement()">-</ion-button>
    <ion-button (click)="reset()">Reset</ion-button>
</ion-content>

export class CounterComponent {
    count = 0;
    increment() { this.count++; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
}

Demonstrates a simple counter using Ionic Angular components with event bindings.

<ion-header>
    <ion-toolbar>
        <ion-title>Dark Mode Counter</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content class="ion-padding" style="text-align:center" [ngClass]="{dark: isDark}">
    <h2>Counter: {{ count }}</h2>
    <ion-button (click)="increment()">+</ion-button>
    <ion-button (click)="decrement()">-</ion-button>
    <ion-button (click)="reset()">Reset</ion-button>
    <br/><br/>
    <ion-button (click)="toggleTheme()">Switch Theme</ion-button>
</ion-content>

export class DarkCounterComponent {
    count = 0;
    isDark = false;
    increment() { this.count++; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; } 
}

Demonstrates an Ionic Angular counter with dark mode toggle functionality.

<template>
    <ion-app>
        <ion-header>
        <ion-toolbar>
        <ion-title>Ionic Vue Counter</ion-title>
        </ion-toolbar>
        </ion-header>
        <ion-content class="ion-padding" style="text-align:center">
        <h2>Counter: {{ count }}</h2>
        <ion-button @click="count++">+</ion-button>
        <ion-button @click="count--">-</ion-button>
        <ion-button @click="count=0">Reset</ion-button>
        </ion-content>
    </ion-app>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        return { count };
    }
}
</script>

Demonstrates a simple counter using Ionic Vue with reactive state.

<template>
    <ion-app :class="isDark ? 'dark-theme' : 'light-theme'">
        <ion-header>
        <ion-toolbar>
        <ion-title>Dark Mode Counter</ion-title>
        </ion-toolbar>
        </ion-header>
        <ion-content class="ion-padding" style="text-align:center">
        <h2>Counter: {{ count }}</h2>
        <ion-button @click="count++">+</ion-button>
        <ion-button @click="count--">-</ion-button>
        <ion-button @click="count=0">Reset</ion-button>
        <br/><br/>
        <ion-button @click="toggleTheme">Switch Theme</ion-button>
        </ion-content>
    </ion-app>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const isDark = ref(false);
        const toggleTheme = () => { isDark.value = !isDark.value };
        return { count, isDark, toggleTheme };
    }
}
</script>

Demonstrates an Ionic Vue counter with dark/light theme toggle.

import React, { useState } from 'react';
import { IonApp, IonContent, IonButton, IonHeader, IonTitle, IonToolbar, IonText, IonInput } from '@ionic/react';

const Counter = () => {
    const [count, setCount] = useState(0);
    const [step, setStep] = useState(1);

    return (
        <IonApp>
        <IonHeader>
        <IonToolbar>
        <IonTitle>Step Counter</IonTitle>
        </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding" style={{textAlign:'center'}}>
        <IonText><h2>Counter: {count}</h2></IonText>
        <IonInput type='number' value={step} onIonChange={e => setStep(parseInt(e.detail.value,10)||1)} placeholder='Step'/>
        <IonButton onClick={() => setCount(count + step)}>+</IonButton>
        <IonButton onClick={() => setCount(count - step)}>-</IonButton>
        <IonButton onClick={() => setCount(0)}>Reset</IonButton>
        </IonContent>
        </IonApp>
    );
}

export default Counter;

Ionic React counter example with customizable step increment.

import React, { useState, useEffect } from 'react';
import { IonApp, IonContent, IonHeader, IonToolbar, IonTitle, IonText, IonButton } from '@ionic/react';

const AutoCounter = () => {
    const [count, setCount] = useState(0);
    const [isRunning, setIsRunning] = useState(true);

    useEffect(() => {
        const interval = setInterval(() => {
        if(isRunning) setCount(c => c+1);
        }, 1000);
        return () => clearInterval(interval);
    }, [isRunning]);

    return (
        <IonApp>
        <IonHeader>
        <IonToolbar>
        <IonTitle>Auto Counter</IonTitle>
        </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding" style={{textAlign:'center'}}>
        <IonText><h2>Counter: {count}</h2></IonText>
        <IonButton onClick={() => setIsRunning(!isRunning)}>{isRunning ? 'Pause' : 'Resume'}</IonButton>
        <IonButton onClick={() => setCount(0)}>Reset</IonButton>
        </IonContent>
        </IonApp>
    );
}

export default AutoCounter;

Ionic React counter example that automatically increments every second.

import React, { useState } from 'react';
import { IonApp, IonContent, IonButton, IonHeader, IonToolbar, IonTitle, IonText } from '@ionic/react';

const MultiCounter = () => {
    const [counters, setCounters] = useState([0,0,0]);

    const increment = index => {
        const newCounters = [...counters];
        newCounters[index]++;
        setCounters(newCounters);
    };

    return (
        <IonApp>
        <IonHeader>
        <IonToolbar>
        <IonTitle>Multi Counter</IonTitle>
        </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding" style={{textAlign:'center'}}>
        {counters.map((count, index) => (
        <div key={index} style={{marginBottom:'20px'}}>
        <IonText><h2>Counter {index+1}: {count}</h2></IonText>
        <IonButton onClick={() => increment(index)}>+</IonButton>
        </div>
        ))}
        </IonContent>
        </IonApp>
    );
}

export default MultiCounter;

Ionic React example with multiple independent counters in one page.